<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="过程分析表" data-page-identification="b_nnrlndu6gm">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
            <!--审批详情-->
            <a-modal
                @cancel="statuState.visible = false"
                centered
                :visible="statuState.visible"
                title="审批详情"
                :footer="null"
                :body-style="{ maxHeight: '700px', overflowY: 'auto' }"
                width="400px"
            >
                <div class="status-item" v-for="(item, index) in statuState.list">
                    <div class="title-new-status">
                        <div class="left-title"
                            >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
                        >
                        <div class="right-title"
                            >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
                        >
                    </div>
                    <a-steps class="status-step" direction="vertical">
                        <a-step
                            v-for="(inside, index) in item.processTaskList"
                            :title="inside.nodeMessage"
                            :description="inside.taskName + ':' + inside.assignUserName"
                            :status="getIconStatus(inside.nodeStatus)"
                        />
                    </a-steps>
                </div>
            </a-modal>

            <!--审批详情-->
            <!--         周目标 -->
            <a-modal
                v-model:visible="weekTargetState.weekTargetVisible"
                width="1600px"
                :body-style="{ maxHeight: '680px', overflowY: 'auto', overflowX: 'hidden' }"
                centered
                :footer="null"
                destroy-on-close
                :maskClosable="false"
                class="menu-modal"
            >
                <template #title>
                    <div class="custom-header" @contextmenu.prevent="showContextMenu">
                        <span class="custom-title">{{ weekTargetState.modalTitle }}</span>
                        <div class="context-menu" v-if="titleMenu.visible">
                            <a-button type="link" size="smll" @click="handleShowTask">取消隐藏</a-button>
                        </div>
                    </div>
                </template>
                <div v-for="(target, index) in weekTargetState.targetList" :key="index" class="target-message">
                    <div class="target-title" v-if="target.priority == 1">周核心目标：</div>
                    <div class="target-title" v-if="target.priority == 2">周目标关键路径：</div>
                    <div class="target-title" v-if="target.priority == 3">行动项任务周目标：</div>
                    <div class="target-content">
                        <a-textarea
                            :class="`textarea-${index}`"
                            v-if="target.editing"
                            :maxlength="1000"
                            :rows="3"
                            v-model:value="target.weekGoals"
                            placeholder="请输入"
                            @blur="saveTarget(index)"
                            style="width: 1300px"
                        />

                        <a-tooltip v-else placement="topLeft">
                            <template #title>PMO可点击修改任务周目标</template>
                            <div
                                class="target-span"
                                :style="{
                                    width: '1300px',
                                    height: isExpanded(index) ? 'auto' : '32px'
                                }"
                                @click="handlerEditTarget(target.value, index)"
                            >
                                <span v-html="formattedWeekGoals(target.weekGoals) || '--'"></span>
                            </div>
                        </a-tooltip>

                        <a-button
                            @click="toggleExpand(index)"
                            v-if="!target.editing"
                            type="link"
                            style="position: relative; left: 45px"
                        >
                            {{ isExpanded(index) ? '收起' : '详情' }}
                            <template v-if="isExpanded(index)">
                                <svg
                                    style="position: absolute; right: 0; top: 8px"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="14px"
                                    height="14px"
                                    viewBox="0 0 14 14"
                                    version="1.1"
                                >
                                    <title>收起</title>
                                    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="项目周情况-全部展示" transform="translate(-1624, -204)">
                                            <g id="编组-3" transform="translate(1592, 201)">
                                                <g id="收起" transform="translate(32, 3)">
                                                    <rect id="矩形" x="0" y="0" width="14" height="14" />
                                                    <g
                                                        id="编组"
                                                        transform="translate(1.75, 1.75)"
                                                        stroke="#3875FF"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    >
                                                        <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                                                        <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </template>
                            <template v-else>
                                <svg
                                    style="position: absolute; right: 0; top: 8px"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="14px"
                                    height="14px"
                                    viewBox="0 0 14 14"
                                    version="1.1"
                                >
                                    <title>详情</title>
                                    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="项目周情况-全部" transform="translate(-1364, -80)">
                                            <g id="编组-3" transform="translate(1332, 77)">
                                                <g
                                                    id="展开"
                                                    transform="translate(39, 10) scale(1, -1) translate(-39, -10)translate(32, 3)"
                                                >
                                                    <rect id="矩形" x="0" y="0" width="14" height="14" />
                                                    <g
                                                        id="编组"
                                                        transform="translate(1.75, 1.75)"
                                                        stroke="#3875FF"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    >
                                                        <polyline id="路径" points="10.5 0 5.25 5.25 0 0" />
                                                        <polyline id="路径" points="10.5 5.25 5.25 10.5 0 5.25" />
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </template>
                        </a-button>
                    </div>
                </div>

                <a-table
                    class="target-table-box"
                    :scroll="{ x: scrollX, y: '600px' }"
                    :columns="weekColumns"
                    :data-source="weekTargetState.weekData"
                    bordered
                    rowKey="id"
                    :loading="weekTableLoading"
                    :customRow="customClick"
                    @resizeColumn="handleResizeColumn"
                >
                    <template #bodyCell="{ column, record, index }">
                        <!--                      行动项任务名称-->
                        <template v-if="column.dataIndex === 'actionTaskName'">
                            <div
                                class="finishStandard-div"
                                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden',
                                    textAlign: record.actionTaskName ? 'left' : 'center'
                                }"
                                >{{ record.actionTaskName || '--' }}</div
                            >
                        </template>
                        <!--                      行动项任务名称-->
                        <template v-if="column.dataIndex === 'expanded'">
                            <div
                                @click="() => toggleExpand1(record)"
                                style="cursor: pointer; color: #3875ff; display: inline-block"
                            >
                                {{ record.expanded ? '折叠' : '展开' }}
                            </div>
                            <!--             <div v-if="menuVisible" style="display: inline-block;cursor: pointer; color: #3875ff"> 隐藏</div>-->
                        </template>
                        <!--                      核心周目标-->
                        <template v-if="column.dataIndex === 'coreWeekContent'">
                            <template v-if="record.coreWeekEditing">
                                <a-textarea
                                    ref="coreWeekInput"
                                    v-model:value="record.coreWeekContent"
                                    @blur="() => handleSave(record, 'coreWeek', 'coreWeekEditing')"
                                />
                            </template>
                            <template v-else>
                                <div
                                    class="action-task"
                                    :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.coreWeekContent ? 'left' : 'center'
                                    }"
                                    @click="() => handleEdit(record, 'coreWeekEditing', 'coreWeekInput')"
                                    v-html="formattedWeekGoals(record.coreWeekContent) || '--'"
                                ></div>
                            </template>
                        </template>
                        <!--                      核心周目标-->
                        <!--                      完成标准-->
                        <template v-if="column.dataIndex === 'finishStandard'">
                            <div
                                class="finishStandard-div"
                                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
                                >{{ record.finishStandard || '--' }}</div
                            >
                        </template>
                        <!--                      完成标准-->
                        <!--                      任务名称-->
                        <template v-if="column.dataIndex === 'taskName'">
                            <div
                                class="finishStandard-div"
                                :style="{
                                    width: '100%',
                                    height: record.expanded ? 'auto' : '20px',
                                    overflow: 'hidden'
                                }"
                                >{{ record.taskName || '--' }}</div
                            >
                        </template>
                        <!--                      任务名称-->
                        <template v-if="column.dataIndex === 'priority'">
                            <template v-if="record.priorityEditing">
                                <a-select
                                    ref="priorityInput"
                                    style="width: 100%"
                                    v-model:value="record.priority"
                                    :options="[
                                        { label: '1', value: '1' },
                                        { label: '2', value: '2' },
                                        { label: '3', value: '3' }
                                    ]"
                                    @blur="() => handleSave(record, 'priority', 'priorityEditing')"
                                />
                            </template>
                            <template v-else>
                                <div
                                    @click="() => handleEdit(record, 'priorityEditing', 'priorityInput')"
                                    class="priority-edit"
                                    >{{ record.priority }}</div
                                >
                            </template>
                        </template>
                        <!-- 时间 -->
                        <template v-else-if="column.dataIndex === 'actionTaskStatus'">
                            <template v-if="record.statusEditing">
                                <a-textarea
                                    ref="statusInput"
                                    v-model:value="record.actionTaskStatus"
                                    @blur="() => handleSave(record, 'status', 'statusEditing')"
                                />
                            </template>
                            <template v-else>
                                <div
                                    class="action-task"
                                    :style="{
                                        cursor: 'pointer',
                                        display: 'inline-block',
                                        width: '100%',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        position: 'relative',
                                        textAlign: record.actionTaskStatus ? 'left' : 'center'
                                    }"
                                    @click="() => handleEditStatus(record, 'statusEditing', 'statusInput')"
                                    v-html="formattedWeekGoals(record.actionTaskStatus) || '--'"
                                ></div>
                            </template>
                        </template>
                        <!-- 完成情况备注 -->
                        <template v-else-if="column.dataIndex === 'finishRemarks'">
                            <template v-if="record.finishEditing">
                                <a-textarea
                                    ref="finishInput"
                                    v-model:value="record.finishRemarks"
                                    @blur="() => handleSave(record, 'finish', 'finishEditing')"
                                />
                            </template>
                            <template v-else>
                                <div
                                    class="finish-mark"
                                    :style="{
                                        cursor: 'pointer',
                                        whiteSpace: 'normal',
                                        wordWrap: 'break-word',
                                        minWidth: '130px',
                                        height: record.expanded ? 'auto' : '20px',
                                        overflow: 'hidden',
                                        textAlign: record.finishRemarks ? 'left' : 'center'
                                    }"
                                    @click="() => handleEdit(record, 'finishEditing', 'finishInput')"
                                    v-html="formattedWeekGoals(record.finishRemarks) || '--'"
                                ></div>
                            </template>
                        </template>
                    </template>
                </a-table>

                <!--        <div class="content-menu" v-if="menuVisible" :style="menuStyle"  @click="handleHideTaskTask">-->
                <!--          隐藏-->
                <!--        </div>-->
                <a-menu :style="menuStyle" v-if="menuVisible">
                    <a-menu-item @click="handleHideTask">隐藏</a-menu-item>
                </a-menu>
            </a-modal>

            <!--          周目标-->
            <a-modal
                :visible="scoreState.visible"
                title="加减分详情"
                :footer="null"
                width="1000px"
                @cancel="scoreState.visible = false"
                zIndex="1200"
                centered
                :body-style="{ paddingTop: '16px' }"
                :maskClosable="false"
            >
                <div class="score-title-first">
                    <ExclamationCircleOutlined
                        style="color: orange; margin-right: 8px"
                    />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
                </div>
                <div class="score-table" v-if="scoreState.type === '项目总监'">
                    <div class="score-title"
                        >项目总监加减分总和：<span
                            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
                            >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                        >
                    </div>

                    <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                        <div class="score-month"
                            >{{ item.month }}月绩效结算明细
                            <span class="month-score"
                                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                            >
                        </div>
                        <a-table
                            :scroll="{ x: '700px', y: '200px' }"
                            :columns="labelCoulmn"
                            :dataSource="item.data"
                            bordered
                            :pagination="false"
                        />
                    </div>
                </div>
                <div class="score-table" v-if="scoreState.type === '项目经理'">
                    <div class="score-title"
                        >项目经理加减分总和：<span
                            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
                            >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                        >
                    </div>
                    <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                        <div class="score-month"
                            >{{ item.month }}月绩效结算明细
                            <span class="month-score"
                                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                            >
                        </div>
                        <a-table
                            :scroll="{ x: '700px', y: '200px' }"
                            :columns="labelCoulmn"
                            :dataSource="item.data"
                            bordered
                            :pagination="false"
                        />
                    </div>
                </div>
                <div class="score-table" v-if="scoreState.type === '负责人'">
                    <div class="score-title"
                        >项目负责人和任务执行人加减分总和：<span
                            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
                            >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                        >
                    </div>
                    <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                        <div class="score-month"
                            >{{ item.month }}月绩效结算明细
                            <span class="month-score"
                                >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                            >
                        </div>
                        <a-table
                            :scroll="{ x: '700px', y: '200px' }"
                            :columns="labelCoulmn"
                            :dataSource="item.data"
                            bordered
                            :pagination="false"
                        />
                    </div>
                </div>
            </a-modal>
            <a-modal
                :visible="actionState.visibleRisk"
                title="风险"
                width="80vw"
                centered
                destroyOnClose
                :footer="null"
                @cancel="actionState.visibleRisk = false"
                :maskClosable="false"
            >
                <a-table
                    class="risk-table"
                    bordered
                    rowKey="taskId"
                    :customRow="customRow"
                    :columns="actionState.riskColumns"
                    :data-source="actionState.riskList"
                    :pagination="false"
                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                >
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'operation'">
                            <a-button
                                type="link"
                                :disabled="record.riskState === '关闭'"
                                @click="handlerBeforeClose(record)"
                                >关闭</a-button
                            >
                        </template>
                    </template>
                </a-table>
            </a-modal>
            <div class="search-div" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                <a-form :model="stateK.searchForm" ref="searchRef">
                    <a-row :gutter="24" style="height: 32px">
                        <a-col :span="4" style="height: 32px; margin-top: 20px">
                            <a-form-item label="区域">
                                <a-select
                                    allow-clear
                                    @focus="getAreaList"
                                    v-model:value="stateK.searchForm.region"
                                    :options="stateK.regionList"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" style="margin-top: 20px">
                            <a-form-item label="项目阶段">
                                <a-select
                                    allow-clear
                                    @focus="getMilepostList"
                                    v-model:value="stateK.searchForm.milepostName"
                                    :options="stateK.milepostList"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" style="32px;margin-top: 20px">
                            <a-form-item label="标签">
                                <a-select
                                    show-search
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    allow-clear
                                    @focus="getLabelList"
                                    v-model:value="stateK.searchForm.label"
                                    :options="stateK.labelList"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="3" style="margin-top: 20px"
                            ><a-space
                                ><a-button type="primary" @click="getTableList">查询</a-button>
                                <a-button type="default" @click="reset">重置</a-button></a-space
                            ></a-col
                        >
                    </a-row>
                </a-form>
            </div>
            <div class="search-div" v-else>
                <a-form :model="stateNoTemplate.searchForm" ref="searchRef">
                    <a-row :gutter="24" style="height: 32px">
                        <a-col :span="4" style="height: 32px; margin-top: 20px">
                            <a-form-item label="项目名称">
                                <a-select
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    show-search
                                    allow-clear
                                    @focus="getNoTemplateProject"
                                    v-model:value="stateNoTemplate.projectName"
                                    :options="stateNoTemplate.projectNameList"
                                    @change="projectNameChange"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" style="32px;margin-top: 20px">
                            <a-form-item label="项目阶段">
                                <a-select
                                    show-search
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    allow-clear
                                    @focus="getNoTemplateMilepostList"
                                    v-model:value="stateNoTemplate.milepostName"
                                    :options="stateNoTemplate.milepostList"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :span="3" style="32px;margin-top: 20px"
                            ><a-space
                                ><a-button type="primary" @click="getNoTemplate">查询</a-button>
                                <a-button type="default" @click="resetNoTemplate">重置</a-button></a-space
                            ></a-col
                        >
                    </a-row>
                </a-form>
            </div>
            <div class="kb-page">
                <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange(activeKey)">
                    <a-tab-pane
                        v-for="(item, index) in stateK.templateList"
                        :key="item.templateId"
                        :tab="item.templateName"
                    />
                </a-tabs>
                <div class="table-tip">
                    <div class="left-top">
                        <div class="finish"><span class="tip-msg">已完成：</span><div class="finish-box"></div></div>
                        <div class="running"><span class="tip-msg">进行中：</span><div class="running-box"></div></div>
                        <div class="daily"><span class="tip-msg">延期：</span><div class="daily-box"></div></div>
                        <div class="daily"
                            ><span class="tip-msg">关联行动项任务延期：</span><div class="association-daily-box"></div
                        ></div>
                        <div class="unstart"><span class="tip-msg">未启动：</span><div class="unstart-box"></div></div>
                        <div class="one-click"><div class="one-click-icon"></div><span>单击标签图标添加备注</span></div>
                        <div class="hover-click"
                            ><div class="hover-click-icon"></div><span>鼠标悬浮标签查看备注</span></div
                        >
                        <div class="db-click"><div class="db-click-icon"></div><span>双击任务表格查看详情</span></div>
                        <div class="cercle-click"
                            ><div class="cercle-click-icon"></div><span>圆标内数字为风险任务数量</span></div
                        >
                        <div class="squire-click"
                            ><div class="squire-click-icon"></div><span>方标内数字为行动项任务数量</span></div
                        >
                    </div>
                    <div class="right-top">
                        <a-button
                            style="margin: 15px 0"
                            type="primary"
                            @click="handleGetName"
                            v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'"
                        >
                            <template #icon> <EditOutlined /> </template>修改项目简称</a-button
                        >
                    </div>
                </div>
                <a-spin :spinning="mainLoading.loading" :tip="mainLoading.tip">
                    <div class="no-template-main" v-if="activeKey === '-1' || activeKey === '-2' || activeKey === '-3'">
                        <div class="no-template-content" v-if="noTemplateState.noTemplateData.length == 0">
                            <div class="no-img">
                                <div class="tip-msg-img">暂无数据</div>
                            </div>
                        </div>
                        <div class="table-item" v-for="(item, index) in noTemplateState.noTemplateData">
                            <div class="table-title" @dblclick="showWeekTarget(item, false)"
                                >{{ item.name
                                }}<div
                                    class="action-title-icon"
                                    @click="getActionList(item)"
                                    v-if="item.actionTaskNumber > 0"
                                    @dblclick.stop=""
                                >
                                    {{ item.actionTaskNumber }}
                                </div></div
                            >
                            <a-table
                                :columns="noTemplateColumns"
                                :data-source="item.data"
                                :pagination="false"
                                bordered
                                :scroll="{ y: '500px' }"
                            >
                                <template #headerCell="{ column, title }"> </template>
                                <template #bodyCell="{ column, record, text }">
                                    <template v-if="column.dataIndex === 'taskStatus'">
                                        <div
                                            class="record-div-orange"
                                            v-if="record && record.projectProgressEnum === 'ACTION_TASK_DELAY'"
                                            @dblclick="handleGetTask(record)"
                                        >
                                            <div
                                                class="risk-num-blue"
                                                v-if="record.riskCount"
                                                @click="handlerShowRisks(record)"
                                                >{{ record.riskCount }}</div
                                            >
                                            <div
                                                class="action-num-blue"
                                                v-if="record.actionTaskCount"
                                                @click="handlerShowAction(record)"
                                                >{{ record.actionTaskCount }}</div
                                            >
                                            <div class="task-ower-blue">{{ record.taskOwner }}</div>
                                            <div
                                                class="icon-hollow"
                                                v-if="record.remarks == null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            ></div>
                                            <div
                                                class="icon-solid"
                                                v-if="record.remarks !== null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                                <a-tooltip placement="left">
                                                    <template #title>{{ record.remarks }}</template>
                                                    <span class="tool-tip"></span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div
                                            class="record-div-white"
                                            v-if="record && record.projectProgressEnum === 'UN_START'"
                                            @dblclick="handleGetTask(record)"
                                        >
                                            <div
                                                class="risk-num-white"
                                                v-if="record.riskCount"
                                                @click="handlerShowRisks(record)"
                                                >{{ record.riskCount }}</div
                                            >
                                            <div
                                                class="action-num-white"
                                                v-if="record.actionTaskCount"
                                                @click="handlerShowAction(record)"
                                                >{{ record.actionTaskCount }}</div
                                            >
                                            <div class="task-ower-white">{{ record.taskOwner }}</div>
                                            <div
                                                class="icon-hollow-deep"
                                                v-if="record.remarks == null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                            </div>

                                            <div
                                                class="icon-solid-deep"
                                                v-else-if="record.remarks !== null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                                <a-tooltip placement="left" :overlayStyle="remarks - tool">
                                                    <template #title>{{ record.remarks }}</template>
                                                    <span class="tool-tip"></span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div
                                            class="record-div-green"
                                            v-if="record && record.projectProgressEnum === 'FINISH'"
                                            @dblclick="handleGetTask(record)"
                                        >
                                            <div
                                                class="risk-num-green"
                                                v-if="record.riskCount"
                                                @click="handlerShowRisks(record)"
                                                >{{ record.riskCount }}</div
                                            >
                                            <div
                                                class="action-num-green"
                                                v-if="record.actionTaskCount"
                                                @click="handlerShowAction(record)"
                                                >{{ record.actionTaskCount }}</div
                                            >
                                            <div class="task-ower-green">{{ record.taskOwner }}</div>
                                            <div
                                                class="icon-hollow"
                                                v-if="record.remarks == null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            ></div>
                                            <div
                                                class="icon-solid"
                                                v-if="record.remarks !== null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                                <a-tooltip placement="left" :overlayStyle="remarks - tool">
                                                    <template #title>{{ record.remarks }}</template>
                                                    <span class="tool-tip"></span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div
                                            class="record-div-red"
                                            v-if="record && record.projectProgressEnum === 'DELAY'"
                                            @dblclick="handleGetTask(record)"
                                        >
                                            <div
                                                class="risk-num-red"
                                                v-if="record.riskCount"
                                                @click="handlerShowRisks(record)"
                                                >{{ record.riskCount }}</div
                                            >
                                            <div
                                                class="action-num-red"
                                                v-if="record.actionTaskCount"
                                                @click="handlerShowAction(record)"
                                                >{{ record.actionTaskCount }}</div
                                            >
                                            <div class="task-ower-red">{{ record.taskOwner }}</div>
                                            <div
                                                class="icon-hollow"
                                                v-if="record.remarks == null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            ></div>
                                            <div
                                                class="icon-solid"
                                                v-if="record.remarks !== null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                                <a-tooltip placement="left" :overlayStyle="remarks - tool">
                                                    <template #title>{{ record.remarks }}</template>
                                                    <span class="tool-tip"></span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div
                                            class="record-div-blue"
                                            v-if="record && record.projectProgressEnum === 'RUNNING'"
                                            @dblclick="handleGetTask(record)"
                                        >
                                            <div
                                                class="risk-num-blue"
                                                v-if="record.riskCount"
                                                @click="handlerShowRisks(record)"
                                                >{{ record.riskCount }}</div
                                            >
                                            <div
                                                class="action-num-blue"
                                                v-if="record.actionTaskCount"
                                                @click="handlerShowAction(record)"
                                                >{{ record.actionTaskCount }}</div
                                            >
                                            <div class="task-ower-blue">{{ record.taskOwner }}</div>
                                            <div
                                                class="icon-hollow"
                                                v-if="record.remarks == null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            ></div>
                                            <div
                                                class="icon-solid"
                                                v-if="record.remarks !== null"
                                                @click.stop="handleRemarks(record)"
                                                @dblclick.stop=""
                                            >
                                                <a-tooltip placement="left" :overlayStyle="remarks - tool">
                                                    <template #title>{{ record.remarks }}</template>
                                                    <span class="tool-tip"></span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                        <div
                                            class="record-div-hidden"
                                            v-if="record && record.projectProgressEnum === 'HIDDEN'"
                                            @click="tipMessage"
                                        >
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <div class="kb-table-box" v-else>
                        <a-table
                            :columns="stateK.columns"
                            :data-source="stateK.dataSource"
                            bordered
                            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                            :pagination="false"
                            :loading="stateK.tableLoading"
                            :scroll="{ x: 'max-content', y: '560px' }"
                        >
                            <template #headerCell="{ column, title, index }" style="position: relative">
                                <template v-if="column.title !== '项目阶段' && column.title !== '任务名称'">
                                    <div class="kb-title" @dblclick="showWeekTarget(column, false)"
                                        >{{ title }}
                                        <div
                                            class="kb-title-icon"
                                            @click="getActionList(column)"
                                            v-if="column.actionTaskNumber > 0"
                                        >
                                            {{ column.actionTaskNumber }}
                                        </div>

                                        <a-tooltip placement="top">
                                            <template #title> 单击查看场景周情况 </template>
                                            <div
                                                v-if="column.scene"
                                                @click="showWeekTarget(column, true)"
                                                @dblclick.stop=""
                                                class="cj-title-icon"
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                                    width="16px"
                                                    height="16px"
                                                    viewBox="0 0 16 16"
                                                    version="1.1"
                                                >
                                                    <title>任务场景</title>
                                                    <g
                                                        id="页面-1"
                                                        stroke="none"
                                                        stroke-width="1"
                                                        fill="none"
                                                        fill-rule="evenodd"
                                                    >
                                                        <g id="过程分析表" transform="translate(-554, -334)">
                                                            <g id="任务场景" transform="translate(554, 334)">
                                                                <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                                <g
                                                                    id="编组"
                                                                    transform="translate(1, 1)"
                                                                    fill="#3875FF"
                                                                    fill-rule="nonzero"
                                                                >
                                                                    <path
                                                                        d="M6.363875,12.726875 C6.71543876,12.726875 7.0004375,13.0118737 7.0004375,13.3634375 C7.0004375,13.7150013 6.71543876,14 6.363875,14 L1.273125,14 C0.569997478,14 0,13.4300025 0,12.726875 L0,1.273125 C0,0.56875 0.569625,0 1.273125,0 L12.726875,0 C13.43125,0 14,0.569625 14,1.273125 L14,5.726875 C14,6.07843876 13.7150013,6.3634375 13.3634375,6.3634375 C13.0118737,6.3634375 12.726875,6.07843876 12.726875,5.726875 L12.726875,1.90925 C12.726875,1.55792786 12.4420721,1.273125 12.09075,1.273125 L1.90925,1.273125 C1.55792786,1.273125 1.273125,1.55792786 1.273125,1.90925 L1.273125,12.09075 C1.273125,12.4425 1.5575,12.726875 1.90925,12.726875 L6.363,12.726875 L6.363875,12.726875 Z M2.545375,2.226875 L6.045375,2.226875 C6.22127769,2.226875 6.363875,2.36947231 6.363875,2.545375 L6.363875,6.045375 C6.363875,6.220375 6.22125,6.363875 6.045375,6.363875 L2.545375,6.363875 C2.36947231,6.363875 2.226875,6.22127769 2.226875,6.045375 L2.226875,2.545375 C2.226875,2.36947231 2.36947231,2.226875 2.545375,2.226875 Z M7.954625,2.226875 L11.454625,2.226875 C11.5390965,2.226875 11.6201082,2.26043115 11.6798385,2.32016149 C11.7395688,2.37989183 11.773125,2.46090355 11.773125,2.545375 L11.773125,6.045375 C11.773125,6.12984645 11.7395688,6.21085817 11.6798385,6.27058851 C11.6201082,6.33031885 11.5390965,6.363875 11.454625,6.363875 L7.954625,6.363875 C7.77872231,6.363875 7.636125,6.22127769 7.636125,6.045375 L7.636125,2.545375 C7.636125,2.36947231 7.77872231,2.226875 7.954625,2.226875 L7.954625,2.226875 Z M2.545375,7.636125 L6.045375,7.636125 C6.220375,7.636125 6.363875,7.77875 6.363875,7.954625 L6.363875,11.454625 C6.363875,11.629625 6.22125,11.773125 6.045375,11.773125 L2.545375,11.773125 C2.46090355,11.773125 2.37989183,11.7395688 2.32016149,11.6798385 C2.26043115,11.6201082 2.226875,11.5390965 2.226875,11.454625 L2.226875,7.954625 C2.226875,7.779625 2.3695,7.636125 2.545375,7.636125 L2.545375,7.636125 Z M8.90925,7.636125 L13.363,7.636125 C13.7145638,7.636125 13.9995625,7.92112374 13.9995625,8.2726875 C13.9995625,8.62425126 13.7145638,8.90925 13.363,8.90925 L8.90925,8.90925 C8.55768624,8.90925 8.2726875,8.62425126 8.2726875,8.2726875 C8.2726875,7.92112374 8.55768624,7.636125 8.90925,7.636125 Z M8.90925,10.182375 L13.363,10.182375 C13.7143221,10.182375 13.999125,10.4671779 13.999125,10.8185 C13.999125,11.1698221 13.7143221,11.454625 13.363,11.454625 L8.90925,11.454625 C8.68182812,11.454625 8.47168163,11.3332969 8.35797068,11.1363438 C8.24425974,10.9393906 8.24425974,10.6967344 8.35797068,10.4997812 C8.47168163,10.3028281 8.68182812,10.1815 8.90925,10.1815 L8.90925,10.182375 Z M8.90925,12.726875 L13.363,12.726875 C13.7145638,12.726875 13.9995625,13.0118737 13.9995625,13.3634375 C13.9995625,13.7150013 13.7145638,14 13.363,14 L8.90925,14 C8.55768624,14 8.2726875,13.7150013 8.2726875,13.3634375 C8.2726875,13.0118737 8.55768624,12.726875 8.90925,12.726875 Z"
                                                                        id="形状"
                                                                    />
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                        </a-tooltip>
                                    </div>
                                </template>
                            </template>
                            <template #bodyCell="{ column, record, text }">
                                <template v-if="column.dataIndex === 'taskName'">
                                    <div class="task-name">
                                        <div
                                            v-if="record.mark === '里程碑'"
                                            :class="{
                                                'task-milestone': record.mark === '里程碑',
                                                'task-milestone-right': record.mark === '里程碑' && record.critialPath
                                            }"
                                            >里程碑</div
                                        >
                                        <div
                                            v-else-if="record.mark === '初验'"
                                            :class="{
                                                'task-first': record.mark === '初验',
                                                'task-first-right': record.mark === '初验' && record.critialPath
                                            }"
                                        ></div>
                                        <div
                                            v-else-if="record.mark === '终验'"
                                            class="task-over"
                                            :class="{
                                                'task-over': record.mark === '终验',
                                                'task-over-right': record.mark === '终验' && record.critialPath
                                            }"
                                        ></div>
                                        <div v-if="record.critialPath" class="critical-path">关键路径</div>
                                        <div
                                            :class="{
                                                'is-first':
                                                    (record.mark !== null || record.mark !== '') && !record.critialPath,
                                                'is-first-no':
                                                    (record.mark === null || record.mark === '') && !record.critialPath,
                                                'is-first-path':
                                                    (record.mark !== null || record.mark !== '') && record.critialPath,
                                                'is-first-path-no-mark':
                                                    (record.mark === null || record.mark === '') && record.critialPath
                                            }"
                                        >
                                            <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                                <template #title>
                                                    <p style="color: #262626; margin: 0"
                                                        >{{ record.taskIndex }} {{ text }}</p
                                                    >
                                                </template>
                                                <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                                            </a-tooltip>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="column.dataIndex === 'milepostName'">
                                    {{ text }}
                                </template>
                                <div
                                    class="record-div-white"
                                    v-if="text && text.projectProgressEnum === 'UN_START'"
                                    @dblclick="handleGetTask(text)"
                                >
                                    <div class="risk-num-white" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                                    }}</div>
                                    <div
                                        class="action-num-white"
                                        v-if="text.actionTaskCount"
                                        @click="handlerShowAction(text)"
                                        >{{ text.actionTaskCount }}</div
                                    >
                                    <div class="task-ower-white">{{ text.taskOwner }}</div>
                                    <div
                                        class="icon-hollow-deep"
                                        v-if="text.remarks == null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                    </div>

                                    <div
                                        class="icon-solid-deep"
                                        v-else-if="text.remarks !== null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                        <a-tooltip placement="left">
                                            <template #title>{{ text.remarks }}</template>
                                            <span class="tool-tip"></span>
                                        </a-tooltip>
                                    </div>
                                </div>
                                <div
                                    class="record-div-green"
                                    v-if="text && text.projectProgressEnum === 'FINISH'"
                                    @dblclick="handleGetTask(text)"
                                >
                                    <div class="risk-num-green" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                                    }}</div>
                                    <div
                                        class="action-num-green"
                                        v-if="text.actionTaskCount"
                                        @click="handlerShowAction(text)"
                                        >{{ text.actionTaskCount }}</div
                                    >
                                    <div class="task-ower-green">{{ text.taskOwner }}</div>
                                    <div
                                        class="icon-hollow"
                                        v-if="text.remarks == null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    ></div>
                                    <div
                                        class="icon-solid"
                                        v-if="text.remarks !== null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                        <a-tooltip placement="left">
                                            <template #title>{{ text.remarks }}</template>
                                            <span class="tool-tip"></span>
                                        </a-tooltip>
                                    </div>
                                </div>
                                <div
                                    class="record-div-red"
                                    v-if="text && text.projectProgressEnum === 'DELAY'"
                                    @dblclick="handleGetTask(text)"
                                >
                                    <div class="risk-num-red" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                                    }}</div>
                                    <div
                                        class="action-num-red"
                                        v-if="text.actionTaskCount"
                                        @click="handlerShowAction(text)"
                                        >{{ text.actionTaskCount }}</div
                                    >
                                    <div class="task-ower-red">{{ text.taskOwner }}</div>
                                    <div
                                        class="icon-hollow"
                                        v-if="text.remarks == null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    ></div>
                                    <div
                                        class="icon-solid"
                                        v-if="text.remarks !== null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                        <a-tooltip placement="left">
                                            <template #title>{{ text.remarks }}</template>
                                            <span class="tool-tip"></span>
                                        </a-tooltip>
                                    </div>
                                </div>
                                <div
                                    class="record-div-blue"
                                    v-if="text && text.projectProgressEnum === 'RUNNING'"
                                    @dblclick="handleGetTask(text)"
                                >
                                    <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                                    }}</div>
                                    <div
                                        class="action-num-blue"
                                        v-if="text.actionTaskCount"
                                        @click="handlerShowAction(text)"
                                        >{{ text.actionTaskCount }}</div
                                    >
                                    <div class="task-ower-blue">{{ text.taskOwner }}</div>
                                    <div
                                        class="icon-hollow"
                                        v-if="text.remarks == null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    ></div>
                                    <div
                                        class="icon-solid"
                                        v-if="text.remarks !== null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                        <a-tooltip placement="left">
                                            <template #title>{{ text.remarks }}</template>
                                            <span class="tool-tip"></span>
                                        </a-tooltip>
                                    </div>
                                </div>
                                <div
                                    class="record-div-orange"
                                    v-if="text && text.projectProgressEnum === 'ACTION_TASK_DELAY'"
                                    @dblclick="handleGetTask(text)"
                                >
                                    <div class="risk-num-blue" v-if="text.riskCount" @click="handlerShowRisks(text)">{{
                                        text.riskCount
                                    }}</div>
                                    <div
                                        class="action-num-blue"
                                        v-if="text.actionTaskCount"
                                        @click="handlerShowAction(text)"
                                        >{{ text.actionTaskCount }}</div
                                    >
                                    <div class="task-ower-blue">{{ text.taskOwner }}</div>
                                    <div
                                        class="icon-hollow"
                                        v-if="text.remarks == null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    ></div>
                                    <div
                                        class="icon-solid"
                                        v-if="text.remarks !== null"
                                        @click.stop="handleRemarks(text)"
                                        @dblclick.stop=""
                                    >
                                        <a-tooltip placement="left">
                                            <template #title>{{ text.remarks }}</template>
                                            <span class="tool-tip"></span>
                                        </a-tooltip>
                                    </div>
                                </div>
                                <div
                                    class="record-div-hidden"
                                    v-if="text && text.projectProgressEnum === 'HIDDEN'"
                                    @click="tipMessage"
                                >
                                </div>
                            </template>
                        </a-table>
                    </div>
                </a-spin>
            </div>
            <!--          修改项目简称-->
            <a-modal
                v-model:visible="stateK.editNameVisible"
                @ok="handleChangeName"
                title="修改项目简称"
                width="1000px"
                centered
                :maskClosable="false"
                :body-style="stateK.bodyStyle"
            >
                <a-tabs v-model:activeKey="stateK.activeTab">
                    <a-tab-pane v-for="(tab, index) in stateK.editNameModel" :key="tab.id" :tab="tab.name">
                        <a-form :model="tab.data" :ref="getFormRef(index)">
                            <a-row v-for="(item, index) in tab.data" :key="index" :gutter="24">
                                <a-col :span="10">
                                    <a-form-item
                                        label="项目全称"
                                        :rules="[{ required: true, message: '请输入项目全称！', trigger: 'blur' }]"
                                        :name="[index, 'projectName']"
                                    >
                                        <a-input v-model:value="item.projectName" disabled />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item
                                        label="项目序号"
                                        :rules="[{ required: true, validator: validateNum, trigger: 'blur' }]"
                                        :name="[index, 'projectSeqNo']"
                                    >
                                        <a-input-number
                                            style="width: 100%"
                                            :maxlength="7"
                                            show-count
                                            v-model:value="item.projectSeqNo"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="项目简称"
                                        :rules="{ required: true, validator: validateShortName, trigger: 'blur' }"
                                        :name="[index, 'projectShortName']"
                                    >
                                        <a-input v-model:value="item.projectShortName" :maxlength="7" show-count />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-tab-pane>
                </a-tabs>
            </a-modal>
            <!--          修改项目简称-->
            <!--          任务详情弹窗-->
            <a-modal
                v-model:visible="stateK.taskVisible"
                title="任务详情"
                :footer="null"
                width="1000px"
                centered
                :maskClosable="false"
            >
                <div class="task-detail">
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">项目总监</div>
                            <div class="two-right text-bold">{{ stateK.taskDataSource[0].projectDirector }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">项目经理</div>
                            <div class="two-right text-bold">{{ stateK.taskDataSource[0].pmName }}</div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">项目阶段</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].milepostName }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">任务名称</div>
                            <div class="two-right">
                                <a-tooltip>
                                    <template #title>{{ stateK.taskDataSource[0].taskName }}</template>
                                    <span class="task-name-long">{{ stateK.taskDataSource[0].taskName }}</span>
                                </a-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">任务状态</div>
                            <div class="two-right">
                                <div class="task-status-new" @click="getTaskStatus(stateK.taskDataSource[0].taskId, 0)">
                                    <div
                                        class="wqd-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-if="stateK.taskDataSource[0].taskStatus === '未启动'"
                                        >未启动</div
                                    >
                                    <div
                                        class="jxz-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '进行中'"
                                        >进行中</div
                                    >
                                    <div
                                        class="wc-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '完成'"
                                        >完成</div
                                    >
                                    <div
                                        class="yq-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '延期'"
                                        color="#F5222D"
                                        >延期</div
                                    >
                                    <div
                                        class="yqwc-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '延期完成'"
                                        color="#FAAD14"
                                        >延期完成</div
                                    >
                                    <div
                                        class="spz-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '审批中'"
                                        color="#FAAD14"
                                        >审批中</div
                                    >
                                    <div
                                        class="wqd-btn"
                                        style="margin-top: 8px; margin-left: 0"
                                        v-else-if="stateK.taskDataSource[0].taskStatus === '下线'"
                                        color="#FAAD14"
                                        >下线</div
                                    >
                                    <div v-else>{{ stateK.taskDataSource[0].taskStatus }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">任务进度</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].taskSchedule }}</div>
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">倒计时及加减分</div>
                        <div class="one-right">
                            <div class="count-down-content" style="width: 50%; margin-top: 5px">
                                <a-tooltip
                                    placement="top"
                                    :overlayStyle="standardStyle"
                                    color="#fff"
                                    v-if="
                                        shouldDisplayCountDownWithTooltip(
                                            stateK.taskDataSource[0].labelList,
                                            '倒计时'
                                        )[0]
                                    "
                                >
                                    <template #title>
                                        <div class="count-down-hover">
                                            <p
                                                v-for="(item, index) in stateK.taskDataSource[0].hoverLabelList"
                                                :key="index"
                                                >{{ item }}</p
                                            >
                                        </div>
                                    </template>
                                    <div class="count-down"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(
                                                    stateK.taskDataSource[0].labelList,
                                                    '倒计时'
                                                )[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(
                                                    stateK.taskDataSource[0].labelList,
                                                    '倒计时'
                                                )[1]
                                            )[1]
                                        }}</span></div
                                    >
                                </a-tooltip>
                                <div
                                    v-if="
                                        shouldDisplayCountDownWithTooltip(stateK.taskDataSource[0].labelList, '延期')[0]
                                    "
                                    class="extension-color"
                                >
                                    {{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '延期'
                                            )[1]
                                        )[0]
                                    }}:<span class="weight-num">{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '延期'
                                            )[1]
                                        )[1]
                                    }}</span>
                                </div>

                                <div
                                    v-if="
                                        shouldDisplayCountDownWithTooltip(
                                            stateK.taskDataSource[0].labelList,
                                            '项目经理'
                                        )[0]
                                    "
                                    :class="{
                                        'pm-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目经理'
                                            )[1]
                                        ),
                                        'pm-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目经理'
                                            )[1]
                                        )
                                    }"
                                    @click="showScore(stateK.taskDataSource[0].pmLabelList, '项目经理')"
                                    >{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目经理'
                                            )[1]
                                        )[0]
                                    }}:<span class="weight-num">{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目经理'
                                            )[1]
                                        )[1]
                                    }}</span></div
                                >

                                <div
                                    v-if="
                                        shouldDisplayCountDownWithTooltip(
                                            stateK.taskDataSource[0].labelList,
                                            '任务执行人'
                                        )[0]
                                    "
                                    :class="{
                                        'ower-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '任务执行人'
                                            )[1]
                                        ),
                                        'ower-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '任务执行人'
                                            )[1]
                                        )
                                    }"
                                    @click="showScore(stateK.taskDataSource[0].taskOwnerLabelList, '负责人')"
                                    >{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '任务执行人'
                                            )[1]
                                        )[0]
                                    }}:<span class="weight-num">{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '任务执行人'
                                            )[1]
                                        )[1]
                                    }}</span></div
                                >

                                <div
                                    v-if="
                                        shouldDisplayCountDownWithTooltip(
                                            stateK.taskDataSource[0].labelList,
                                            '项目总监'
                                        )[0]
                                    "
                                    :class="{
                                        'all-group-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目总监'
                                            )[1]
                                        ),
                                        'all-group-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目总监'
                                            )[1]
                                        )
                                    }"
                                    @click="showScore(stateK.taskDataSource[0].projectDirectorLabelList, '项目总监')"
                                    >{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目总监'
                                            )[1]
                                        )[0]
                                    }}:<span class="weight-num">{{
                                        splitStringByColon(
                                            shouldDisplayCountDownWithTooltip(
                                                stateK.taskDataSource[0].labelList,
                                                '项目总监'
                                            )[1]
                                        )[1]
                                    }}</span></div
                                >
                            </div>
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">完成标准</div>
                        <div class="one-right">
                            <p
                                style="color: #262626; margin: 0"
                                v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].finishStandard)"
                                :key="index"
                                >{{ item }}</p
                            >
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">审核标准及注意事项</div>
                        <div class="one-right">
                            <p
                                style="color: #262626; margin: 0"
                                v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].assessorStandard)"
                                :key="index"
                                >{{ item }}</p
                            >
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">SOP</div>
                        <div class="one-right">
                            <p class="task-dependency">{{ stateK.taskDataSource[0].taskDependency }}</p>
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">甲方工作事项</div>
                        <div class="one-right">
                            <p
                                style="color: #262626; margin: 0"
                                v-for="(item, index) in handlerGetSpace(stateK.taskDataSource[0].taskRemarks)"
                                :key="index"
                                >{{ item }}</p
                            >
                        </div>
                    </div>
                    <div class="one-line" v-if="activeKey !== '-1' && activeKey !== '-2' && activeKey !== '-3'">
                        <div class="one-left">附件模板</div>
                        <div class="one-right">
                            <a
                                v-for="(item, index) in stateK.taskDataSource[0].attachmentTemplateList"
                                :key="index"
                                href="javascript:"
                                @click="attachmentTemplateDownLoad(item)"
                                :class="[
                                    'block',
                                    index > 2 && !stateK.taskDataSource[0].attachmentShowAll ? 'hide' : ''
                                ]"
                            >
                                {{ item.name }}
                            </a>
                        </div>
                    </div>
                    <div class="one-line">
                        <div class="one-left">附件</div>
                        <div class="one-right">
                            <a
                                v-for="(item, index) in stateK.taskDataSource[0].ppmEnclosureInfoList"
                                :key="index"
                                href="javascript:"
                                @click="handlerDownload(item)"
                                :class="[
                                    'block',
                                    index > 2 && !stateK.taskDataSource[0].attachmentShowAll ? 'hide' : ''
                                ]"
                            >
                                {{ item.name }}
                            </a>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">任务负责人</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].taskOwner }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">审核员</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].assessorName }}</div>
                        </div>
                    </div>
                    <div class="one-line">
                        <div class="one-left">任务执行人</div>
                        <div class="one-right">
                            {{ stateK.taskDataSource[0].taskParticipantStr }}
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">计划开始</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].startTime }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">实际开始</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].actualStarTime }}</div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">计划完成</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].endTime }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">实际完成</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].taskFinishTime }}</div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">计划工时（小时）</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].workingHours }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">实际工时（小时）</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].actualWorkHours }}</div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">工时投入状态</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].stateInput }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">审批状态</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].approvalStatus }}</div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">优先级</div>
                            <div class="two-right">{{ stateK.taskDataSource[0].priorityStr }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left">未关闭风险数量</div>

                            <div class="two-right risk-num">
                                <span @click="handlerShowRisks(current)">{{
                                    stateK.taskDataSource[0].unclosedRiskNumber
                                }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="two-line">
                        <div class="two-item">
                            <div class="two-left">行动项任务数</div>
                            <div class="two-right risk-num" @click="handlerShowAction(current)">{{
                                stateK.taskDataSource[0].actionTaskCount
                            }}</div>
                        </div>
                        <div class="two-item">
                            <div class="two-left"></div>

                            <div class="two-right risk-num"> </div>
                        </div>
                    </div>
                </div>
            </a-modal>
            <!--          任务详情弹窗-->
            <!--          风险弹窗-->
            <a-modal
                :visible="stateK.visibleRisk"
                title="风险"
                width="80vw"
                centered
                destroyOnClose
                :footer="null"
                @cancel="stateK.visibleRisk = false"
                :maskClosable="false"
            >
                <div class="default-table">
                    <a-table
                        bordered
                        rowKey="taskId"
                        :customRow="customRow"
                        :columns="riskColumns"
                        :data-source="stateK.riskList"
                        :pagination="false"
                        :scroll="{ y: '80vw' }"
                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                    >
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex === 'operation'">
                                <a-button
                                    type="link"
                                    :disabled="record.riskState === '关闭'"
                                    @click="handlerBeforeClose(record)"
                                >
                                    关闭
                                </a-button>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <!--          风险-->
            <!--          备注-->
            <a-modal
                centered
                v-model:visible="stateK.remarksVisible"
                title="添加备注"
                @ok="handleCreateRemarsk"
                :maskClosable="false"
            >
                <a-textarea
                    v-model:value="stateK.remarks"
                    placeholder="请输入备注"
                    :maxlength="1000"
                    :rows="4"
                    show-count
                />
            </a-modal>
            <!--          备注-->
            <!--      行动项-->
            <a-modal
                :visible="stateK.visibleAction"
                title="行动项任务"
                width="80vw"
                centered
                class="xdx-table"
                destroyOnClose
                :footer="null"
                @cancel="stateK.visibleAction = false"
                :body-style="{ maxHeight: '600px', overflowY: 'auto' }"
                :maskClosable="false"
            >
                <div class="action-select">
                    <a-form-item label="任务状态" style="height: 30px">
                        <a-select
                            :max-tag-count="3"
                            v-model:value="stateK.selectActionStatus"
                            mode="multiple"
                            allow-clear
                            :options="[
                                { label: '未启动', value: '未启动' },
                                { label: '进行中', value: '进行中' },
                                { label: '审批中', value: '审批中' },
                                { label: '延期', value: '延期' },
                                { label: '完成', value: '完成' },
                                { label: '延期完成', value: '延期完成' }
                            ]"
                            style="width: 350px; margin-bottom: 12px"
                            @change="getActionList(currentColumn, stateK.selectActionStatus)"
                        />
                    </a-form-item>
                </div>
                <div class="default-table">
                    <a-table
                        bordered
                        rowKey="taskId"
                        :columns="ActionColumns"
                        :data-source="stateK.actionList"
                        :pagination="false"
                        :scroll="{ y: '450px' }"
                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                    >
                        <template #bodyCell="{ column, record, text }">
                            <template v-if="column.dataIndex === 'taskStatusOnOrOff'">
                                <a-switch
                                    :checked="record['taskStatusOnOrOff']"
                                    :disabled="record.nodeType === 'MENU' || !actionState.projectManager"
                                    @click="changeTaskStatusOnOrOff(record)"
                                />
                            </template>
                            <!--                                新-任务进度-->
                            <template v-if="column.dataIndex === 'taskSchedule'">
                                <a-progress
                                    :percent="record.taskSchedule"
                                    status="active"
                                    @click="
                                        changeTaskSchedule(
                                            record.finishPermission,
                                            record.taskSchedule,
                                            record.taskId,
                                            record.taskStatus
                                        )
                                    "
                                />
                            </template>
                            <!--                                end新-任务进度-->
                            <!-- 新-审核标准字段 -->
                            <template v-if="column.dataIndex === 'assessorStandard'">
                                <a-tooltip
                                    @mouseenter="handlerGetStandard(record)"
                                    placement="top"
                                    :overlayStyle="standardStyle"
                                    color="#fff"
                                >
                                    <template #title>
                                        <p
                                            style="color: #262626; margin: 0"
                                            v-for="(item, index) in actionState.standardList"
                                            :key="index"
                                            >{{ item }}</p
                                        >
                                    </template>
                                    <div
                                        style="
                                            min-width: 70px;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                        "
                                        >{{ text }}</div
                                    >
                                </a-tooltip>
                            </template>
                            <!-- 审核标准 -->
                            <template
                                v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'"
                            >
                                <a
                                    @click="
                                        handlerActionShowRisks(
                                            record.actionTaskId,
                                            column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                        )
                                    "
                                >
                                    {{ text }}
                                </a>
                            </template>
                            <!-- 附件模板 -->

                            <template v-if="column.dataIndex === 'attachmentTemplate'">
                                <!--                                  预览/下载-->
                                <div v-for="(item, index) in record.attachmentTemplateList" :key="index">
                                    <a-dropdown>
                                        <span
                                            style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                                            :title="item.name"
                                        >
                                            {{ item.name }}
                                        </span>
                                        <template #overlay>
                                            <a-menu>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        :disabled="!item.type.startsWith('image')"
                                                        @click="previewAttachment(item)"
                                                        >预览</a-button
                                                    >
                                                </a-menu-item>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        @click="attachmentTemplateDownLoad(item)"
                                                        >下载</a-button
                                                    >
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </div>
                                <!--                                  预览/下载-->
                            </template>
                            <template v-if="column.dataIndex === 'milepostName'">
                                {{ text }}
                            </template>
                            <!-- 倒计时 -->
                            <template v-if="column.dataIndex === 'countDown'">
                                <div class="count-down-content">
                                    <a-tooltip
                                        placement="top"
                                        :overlayStyle="standardStyle"
                                        color="#fff"
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]"
                                    >
                                        <template #title>
                                            <div class="count-down-hover">
                                                <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                                                    item
                                                }}</p>
                                            </div>
                                        </template>
                                        <div class="count-down"
                                            >{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[0]
                                            }}:<span class="weight-num">{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[1]
                                            }}</span></div
                                        >
                                    </a-tooltip>
                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]"
                                        class="extension-color"
                                    >
                                        {{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[1]
                                        }}</span>
                                    </div>

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                                        :class="{
                                            'all-group-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            ),
                                            'all-group-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )
                                        }"
                                        @click="showScore(record.projectDirectorLabelList, '项目总监')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[1]
                                        }}</span></div
                                    >

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                                        :class="{
                                            'pm-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            ),
                                            'pm-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )
                                        }"
                                        @click="showScore(record.pmLabelList, '项目经理')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[1]
                                        }}</span></div
                                    >

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                                        :class="{
                                            'ower-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            ),
                                            'ower-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )
                                        }"
                                        @click="showScore(record.taskOwnerLabelList, '负责人')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[1]
                                        }}</span></div
                                    >
                                </div>
                            </template>
                            <!-- 倒计时 -->
                            <template v-if="column.dataIndex === 'taskStatus'">
                                <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                    <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                                    <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                                    <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                                    <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                                    <div v-else>{{ text }}</div>
                                </div>
                            </template>
                            <template v-if="column.dataIndex === 'attachment'">
                                <!--                                  预览/下载-->
                                <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                                    <a-dropdown>
                                        <span
                                            style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                                            :title="item.name"
                                        >
                                            {{ item.name }}
                                        </span>
                                        <template #overlay>
                                            <a-menu>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        :disabled="!item.type.startsWith('image')"
                                                        @click="previewAttachment(item)"
                                                        >预览</a-button
                                                    >
                                                </a-menu-item>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        @click="handlerDownload(item)"
                                                        >下载</a-button
                                                    >
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </div>
                                <!--                                  预览/下载-->
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <a-button
                                    size="small"
                                    v-if="record.taskStatus === '未启动'"
                                    type="link"
                                    @click="handleActionStart(record)"
                                >
                                    开始
                                </a-button>
                                <a-button size="small" v-else type="link" @click="actionBeforeOk(record)">
                                    完成
                                </a-button>
                                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                <a-button
                                    size="small"
                                    type="link"
                                    :disabled="record.disabledEditBtn"
                                    @click="handlerEditAction(record)"
                                >
                                    编辑
                                </a-button>
                                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                <a-popconfirm
                                    title="确定要删除吗？"
                                    :disabled="record.disabledDelBtn"
                                    @confirm="handlerDeleteAction(record)"
                                >
                                    <a-button size="small" :disabled="record.disabledDelBtn" type="link">删除</a-button>
                                </a-popconfirm>
                                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                <a-button
                                    size="small"
                                    type="link"
                                    :disabled="record.disabledNoteBtn"
                                    @click="handlerShowActionNotes(record)"
                                >
                                    历史备注
                                </a-button>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <!--      行动项-->
            <!-- end vid_okmgm4r31j 自定义模板_05m3ee9ywk -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import { nextTick } from 'vue'

    const activeKey = ref(null)
    const stateK = reactive({
        templateList: [],
        standardList: [],
        tableLoading: false,
        searchForm: {
            region: undefined,
            milepostName: undefined,
            taskStatus: undefined,
            time: undefined,
            label: undefined
        },
        regionList: [],
        milepostList: [],
        labelList: [],
        columns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                fixed: 'left',
                align: 'center',
                width: '120px',
                ellipsis: true,
                customCell: item => {
                    const { rowIndex, rowSpan } = item
                    return {
                        rowSpan: rowSpan,
                        style: {
                            fontSize: '16px',
                            color: '#262626',
                            fontWeight: '600',
                            // borderTop: rowIndex ? '2px solid #C2C4C9' : 'none',
                            backgroundColor: '#F7FAFF'
                        }
                    }
                }
            },
            {
                title: '任务名称',
                dataIndex: 'taskName',
                width: '220px',
                ellipsis: true,
                align: 'center',
                fixed: 'left',
                customCell: ({ rowSpan, rowIndex, border }) => {
                    return {
                        style: {
                            backgroundColor: '#F7FAFF',
                            padding: '0 10px'
                        }
                    }
                }
            }
        ],
        dataSource: [],
        editNameVisible: false,
        // editNameActiveKey: '0',
        editNameModel: [],
        // 任务详情列表
        taskDataSource: [],
        taskVisible: false,
        riskList: [],
        actionList: [],
        selectActionStatus: ['未启动', '进行中', '审批中', '延期'],
        visibleRisk: false,
        visibleAction: false,
        remarksVisible: false,
        remarks: undefined,
        activeTab: '',
        bodyStyle: {
            padding: '0 24px 0px 24px',
            height: '800px',
            overflow: 'auto'
        }
    })
    const current = ref({})
    const riskColumns = [
        {
            title: '风险描述',
            dataIndex: 'riskDescription',
            width: '170px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        { title: '解决方案', dataIndex: 'solution', align: 'center' },
        { title: '风险状态', dataIndex: 'riskState', align: 'center' },
        { title: '提交人', dataIndex: 'reportedBy', align: 'center' },
        { title: '提交时间', dataIndex: 'dailyDate', align: 'center' },
        { title: '解决人', dataIndex: 'closeRiskPerson', align: 'center' },
        { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
    ]
    const ActionColumns = [
        {
            title: '行动项任务名称',
            dataIndex: 'actionTaskName',
            ellipsis: true,
            resizable: true,
            width: '220px',
            align: 'center'
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatus',
            resizable: true,
            ellipsis: false,
            width: '140px',
            align: 'center'
        },
        {
            title: '任务进度',
            dataIndex: 'taskSchedule',
            resizable: true,
            ellipsis: false,
            width: '140px',
            align: 'center'
        },
        {
            title: '倒计时及加减分',
            dataIndex: 'countDown',
            resizable: true,
            ellipsis: false,
            width: '250px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px'
                    }
                }
            }
        },
        {
            title: '附件',
            dataIndex: 'attachment',
            resizable: true,
            ellipsis: true,
            width: '200px',
            align: 'center'
        },
        {
            title: '未关闭风险数量',
            dataIndex: 'unclosedRiskNumber',
            resizable: true,
            ellipsis: true,
            width: '200px',
            align: 'center'
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',
            resizable: true,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '审核员',
            dataIndex: 'assessorName',
            resizable: true,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: 'PMO',
            dataIndex: 'projectManagementOffice',
            resizable: true,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '任务执行人',
            resizable: true,
            dataIndex: 'taskParticipantStr',
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '计划开始',
            dataIndex: 'startTime',
            resizable: true,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '实际开始',
            dataIndex: 'examPassTime',
            resizable: true,
            ellipsis: true,
            width: '140px',
            align: 'center'
        },
        {
            title: '计划完成',
            dataIndex: 'endTime',
            ellipsis: true,
            width: '120px',
            resizable: true,
            align: 'center'
        },
        {
            title: '	实际完成',
            dataIndex: 'taskFinishTime',
            ellipsis: true,
            resizable: true,
            width: '120px',
            align: 'center'
        },
        {
            title: '计划工时(小时)',
            dataIndex: 'workingHours',
            resizable: true,
            ellipsis: true,
            width: '130px',
            align: 'center'
        },
        {
            title: '实际工时(小时)',
            dataIndex: 'actualWorkHours',
            resizable: true,
            ellipsis: true,
            width: '130px',
            align: 'center'
        },
        {
            title: '工时投入状态',
            dataIndex: 'stateInput',
            resizable: true,
            ellipsis: true,
            width: '120px',
            align: 'center'
        }
    ]
    const taskColumns = [
        {
            title: '项目阶段',
            dataIndex: 'milepostName',

            ellipsis: true,
            width: '140px',
            fixed: 'left',
            align: 'left',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },

        {
            title: '任务名称',
            dataIndex: 'taskName',
            ellipsis: true,

            width: '220px',
            fixed: 'left',
            align: 'left',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatus',

            ellipsis: false,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '任务进度',
            dataIndex: 'taskSchedule',

            ellipsis: false,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '倒计时及加减分',
            dataIndex: 'countDown',

            ellipsis: false,
            width: '210px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px'
                    }
                }
            }
        },
        {
            title: '未关闭风险数量',
            dataIndex: 'unclosedRiskNumber',

            ellipsis: true,
            width: '150px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        // 新-模板项目完成标准字段
        {
            title: '完成标准',
            dataIndex: 'finishStandard',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        // 新-模板项目审核标准字段
        {
            title: '审核标准及注意事项',
            dataIndex: 'assessorStandard',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '甲方工作事项',
            dataIndex: 'taskRemarks',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '附件模板',
            dataIndex: 'attachmentTemplate',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '附件',
            dataIndex: 'attachment',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',

            ellipsis: true,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '审核员',
            dataIndex: 'assessorName',

            ellipsis: true,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },

        {
            title: '任务执行人',

            dataIndex: 'taskParticipantStr',
            ellipsis: true,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '计划开始',
            dataIndex: 'startTime',

            ellipsis: true,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '实际开始',
            dataIndex: 'actualStarTime',

            ellipsis: true,
            width: '140px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '计划完成',
            dataIndex: 'endTime',
            ellipsis: true,
            width: '120px',

            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '	实际完成',
            dataIndex: 'taskFinishTime',
            ellipsis: true,

            width: '120px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '计划工时(小时)',
            dataIndex: 'workingHours',

            ellipsis: true,
            width: '130px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '实际工时(小时)',
            dataIndex: 'actualWorkHours',

            ellipsis: true,
            width: '130px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '工时投入状态',
            dataIndex: 'stateInput',

            ellipsis: true,
            width: '120px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },

        {
            title: '审批状态',
            dataIndex: 'approvalStatus',

            ellipsis: true,
            width: '200px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },
        {
            title: '优先级',
            dataIndex: 'priorityStr',

            ellipsis: true,
            width: '100px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },

        {
            title: '风险数量',
            dataIndex: 'riskNumber',

            ellipsis: true,
            width: '100px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        },

        {
            title: '依赖任务',
            dataIndex: 'taskDependency',

            ellipsis: true,
            width: '90px',
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        height: '40px',
                        padding: '0 10px'
                    }
                }
            }
        }
    ]

    onMounted(() => {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/template/list', { templateName: '' }).then(data => {
            if (data.code === 200) {
                stateK.templateList = data.data
                stateK.templateList.push({
                    templateId: '-1',
                    templateName: '水泥配送'
                })
                // 可能后续需要放开其他逻辑部分已经做完
                stateK.templateList.push({
                    templateId: '-3',
                    templateName: '煤炭供应链'
                })
                // 可能后续需要放开
                stateK.templateList.push({
                    templateId: '-2',
                    templateName: '试点项目'
                })

                activeKey.value = stateK.templateList[0].templateId
                getTableList()
            } else {
                message.error(data.message || '获取模板列表失败')
            }
        })
    })

    function tabChange(activeKey) {
        if (activeKey === '-1' || activeKey === '-2' || activeKey === '-3') {
            resetNoTemplate()
        } else {
            getTableList()
        }
    }

    function getTableList() {
        mainLoading.loading = true
        const params = {
            templateId: activeKey.value,
            milePostName: stateK.searchForm.milepostName || '',
            areaName: stateK.searchForm.region || '',
            label: stateK.searchForm.label
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/progress/search', params)
            .then(data => {
                if (data.code === 200) {
                    // 过滤掉标题为 "项目阶段" 或 "任务名称" 的对象
                    let filteredColumns = data.data.columns.filter(
                        column => column.title !== '项目阶段' && column.title !== '任务名称'
                    )
                    filteredColumns.forEach(item => {
                        ;(item.width = 165), (item.ellipsis = true), (item.align = 'center')
                    })
                    const oldColumns = stateK.columns.filter(
                        column => column.title === '项目阶段' || column.title === '任务名称'
                    )
                    let combinedColumns = oldColumns.concat(filteredColumns)
                    stateK.columns = combinedColumns
                    stateK.columns.forEach((column, index) => {
                        column.index = index
                    })
                    stateK.dataSource = data.data.dataSource
                    formattedData()
                    stateK.dataSource = groupData(stateK.dataSource)
                } else {
                    message.error(data.message || '获取任务列表失败')
                    stateK.columns = stateK.columns.filter(
                        column => column.title === '项目阶段' || column.title === '任务名称'
                    )
                    stateK.dataSource = []
                }
            })
            .finally(() => {
                mainLoading.loading = false
            })
    }

    const stateNoTemplate = reactive({
        projectName: undefined,
        projectNameList: [],
        milepostName: undefined,
        milepostList: [],

        taskStatus: undefined,
        time: undefined,
        label: undefined
    })

    function getNoTemplate() {
        mainLoading.loading = true
        const params = {
            templateId: activeKey.value,
            projectId: stateNoTemplate.projectName,
            milePostId: stateNoTemplate.milepostName
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/progress/search', params)
            .then(data => {
                noTemplateState.noTemplateData = groupCheckData(data.data)
            })
            .finally(() => {
                mainLoading.loading = false
            })
    }

    function reset() {
        stateK.searchForm.milepostName = ''
        stateK.searchForm.region = ''
        stateK.searchForm.label = ''
        getTableList()
    }

    function resetNoTemplate() {
        ;(stateNoTemplate.projectName = undefined),
            (stateNoTemplate.projectNameList = []),
            (stateNoTemplate.milepostName = undefined),
            (stateNoTemplate.milepostList = []),
            (stateNoTemplate.taskStatus = undefined),
            (stateNoTemplate.time = undefined)
        getNoTemplate()
    }

    function getAreaList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/project_template/ptf/search').then(data => {
            if (data.code === 200) {
                stateK.regionList = data.data.map(item => {
                    return {
                        label: item.areaName,
                        value: item.areaName
                    }
                })
            } else {
                message.error('获取项目阶段失败')
            }
        })
    }

    function getMilepostList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/project/template/1/stage/list').then(data => {
            if (data.code === 200) {
                stateK.milepostList = data.data.map(item => {
                    return {
                        label: item.stageName,
                        value: item.stageName
                    }
                })
            } else {
                message.error('获取项目阶段失败')
            }
        })
    }
    function getLabelList() {
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/mappgin_search', { templateId: activeKey.value }).then(
            data => {
                if (data.code === 200) {
                    stateK.labelList = data.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })
                } else {
                    message.error('获取标签失败')
                }
            }
        )
    }

    function formattedData() {
        stateK.dataSource = stateK.dataSource.map(item => {
            const formattedItem = {
                id: item.id,
                milepostName: item.milepostName,
                taskName: item.taskName,
                mark: item.mark,
                critialPath: item.critialPath
            }

            // 检查是否存在 projectDataMap 字段
            if (item.projectDataMap && Object.keys(item.projectDataMap).length > 0) {
                for (const projectName in item.projectDataMap) {
                    const project = item.projectDataMap[projectName]
                    formattedItem[projectName] = {
                        name: project.projectName || '',
                        id: project.id || '',
                        projectProgressEnum: project.projectProgressEnum || '',
                        remarks: project.remarks || null,
                        rowSpan: project.rowSpan || '',
                        projectId: project.projectId || '',
                        taskId: project.taskId || '',
                        taskOwner: project.taskOwner || '',
                        riskCount: project.riskCount || '',
                        actionTaskCount: project.actionTaskCount || ''
                    }
                }
            } else {
                // 如果 projectDataMap 为空，则将原对象值复制回去
                formattedItem.projectName = ''
                formattedItem.id = ''
                formattedItem.projectProgressEnum = ''
                formattedItem.remarks = null
                formattedItem.rowSpan = ''
                formattedItem.projectId = ''
                formattedItem.taskId = ''
                formattedItem.riskCount = ''
                formattedItem.taskOwner = ''
                formattedItem.actionTaskCount = ''
            }

            return formattedItem
        })
    }

    const toggleExpand1 = record => {
        record.expanded = !record.expanded
    }

    function groupData(data) {
        let milepostName = ''
        if (!data || !data.length) {
            return []
        }
        return data.map((item, index) => {
            if (milepostName !== item.milepostName) {
                milepostName = item.milepostName
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (milepostName === data[i].milepostName) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
                item.border = index
            } else {
                item.rowSpan = 0
            }
            item.rowIndex = index
            return item
        })
    }

    function handlerDownload({ url, name }) {
        function downBlob(blob) {
            const downloadElement = document.createElement('a')
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = name // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        }

        const data = new FormData()
        data.append('path', url)
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(blob => {
            downBlob(blob)
        })
    }

    function handleGetTask(text) {
        current.value = text
        const params = {
            taskName: '',
            endTime: '',
            taskOwner: '',
            taskStatusOnOrOff: 'true',
            taskStatusList: [],
            stateInput: '',
            priorityStr: '',
            milepostId: '',
            projectId: text.projectId,
            taskId: text.taskId
        }
        if (activeKey.value !== '-1' && activeKey.value.value !== '-2' && activeKey.value.value !== '-3') {
            post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/search', params).then(data => {
                if (data.code === 200 && data.data.length > 0) {
                    stateK.taskDataSource = [data.data[0]] || []
                    stateK.taskVisible = true
                } else {
                    message.error('获取任务详情失败')
                }
            })
        } else {
            get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/${text.taskId}`).then(data => {
                if (data.code === 200) {
                    stateK.taskDataSource = [data.data]
                    stateK.taskVisible = true
                } else {
                    message.error('获取任务详情失败')
                }
            })
        }
    }

    function handlerShowRisks(record, type = '未关闭') {
        get(`/solution-ppm/api/v2/built-in-system-ppm/daily/${record.taskId}/${type}/queryRiskList`).then(
            ({ dataList }) => {
                stateK.riskList = dataList
                stateK.visibleRisk = true
            }
        )
    }

    function handlerShowAction(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${record.taskId}`).then(data => {
            stateK.actionList = data.data.dataList
            stateK.visibleAction = true
        })
    }

    //     备注
    function handleRemarks(text) {
        if (!text.taskId || !text.projectId) {
            message.error('问题数据，taskId或projectId为空')
        } else {
            current.value = text
            stateK.remarks = text.remarks || ''
            stateK.remarksVisible = true
        }
    }

    function handleCreateRemarsk() {
        const params = {
            projectId: current.value.projectId,
            taskId: current.value.taskId,
            remarks: stateK.remarks
        }
        put('/solution-ppm/api/v2/built-in-system-ppm/tpm/remarks/modify', params).then(data => {
            if (data.code === 200) {
                message.success('添加成功')
                stateK.remarksVisible = false
                getTableList()
                current.value = {}
                if (activeKey.value === '-1' || activeKey.value === '-2' || activeKey.value === '-3') {
                    getNoTemplate()
                }
            } else {
                message.error(data.message || '添加失败')
            }
        })
    }

    //     改名
    function handleGetName() {
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/search').then(data => {
            if (data.code === 200) {
                stateK.editNameVisible = true
                stateK.editNameModel = data.data
                stateK.activeTab = stateK.editNameModel[0].id
            } else {
                message.error(data.message || '获取项目简称失败')
            }
        })
    }

    const editNameRef = ref([])
    const getFormRef = index => {
        editNameRef.value[index] = editNameRef.value[index] || ref(null)
        return editNameRef.value[index]
    }

    function handleChangeName() {
        let formData = []
        Promise.all(editNameRef.value.map(formRef => formRef.value[0].validate()))
            .then(() => {
                stateK.editNameModel.forEach(tab => {
                    tab.data.forEach(item => {
                        formData.push({
                            mappingId: item.mappingId,
                            projectId: item.projectId,
                            projectName: item.projectName,
                            projectSeqNo: item.projectSeqNo,
                            projectShortName: item.projectShortName,
                            templateId: item.templateId
                        })
                    })
                })
                put('/solution-ppm/api/v2/built-in-system-ppm/tpm/batch_modify', formData).then(data => {
                    if (data.code === 200) {
                        message.success('操作成功')
                        stateK.editNameVisible = false
                        getTableList()
                    } else {
                        message.error(data.message || '修改项目简称失败')
                    }
                })
            })
            .catch(e => {
                let errMsg = findObjectIndex(stateK.editNameModel, e.values[0])
                if (errMsg) {
                    message.info(`请检查-${errMsg.name}-模板下的第-${errMsg.index + 1}-条数据`)
                } else {
                    message.info('请检查数据是否填写完整')
                }
            })
    }

    function findObjectIndex(dataList, targetObject) {
        // 遍历大数组
        for (const item of dataList) {
            // 在当前对象的data数组中查找目标对象
            const index = item.data.findIndex(obj => {
                // 检查mappingId是否匹配
                return obj.projectName === targetObject.projectName
            })
            // 如果找到目标对象，则返回其所在的大数组对象的id和在data数组中的索引
            if (index !== -1) {
                return { ...item, index: index }
            }
        }
        // 如果未找到目标对象，返回 null
        return null
    }

    function shouldDisplayCountDownWithTooltip(labelList, text) {
        const result = labelList?.filter(label => label.includes(text))
        if (result && result.length > 0) {
            return [true, result[0]]
        } else {
            return false
        }
    }

    function hasHyphen(str) {
        return str.includes('-')
    }

    function hasPlus(str) {
        return str.includes('+')
    }

    function splitStringByColon(inputString) {
        return inputString.split(':')
    }

    const shouldDisplayCountDown = targetDate => {
        const { days } = calculateTimeDifference(targetDate)
        return days >= 0 && days <= 7
    }

    // 新-模板项目审核标准格式
    function handlerGetStandard(data) {
        stateK.standardList = data.assessorStandard.split(/[,;；]/)
    }

    // 新-模板项目审核标准格式
    function handlerGetSpace(data) {
        return data?.split(/[,;；]/)
    }

    // 模板项目附件模板下载
    function attachmentTemplateDownLoad(item) {
        const props = { ...item }
        let xhr = new XMLHttpRequest()
        xhr.open('GET', props.url, true)
        xhr.responseType = 'blob'
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(xhr.response, props.name)
                } else {
                    let link = document.createElement('a')
                    let body = document.querySelector('body')
                    link.href = window.URL.createObjectURL(xhr.response)
                    link.download = props.name
                    // fix Firefox
                    link.style.display = 'none'
                    body.appendChild(link)
                    link.click()
                    body.removeChild(link)
                    window.URL.revokeObjectURL(link.href)
                }
            }
        }
        xhr.send()
    }

    const validateShortName = (rule, value, name) => {
        if (!value) {
            return Promise.reject('请输入项目简称')
        } else {
            return Promise.resolve()
        }
    }
    const validateNum = (rule, value, name) => {
        const reg = new RegExp(/^[1-9]\d*$/)
        if (!value) {
            return Promise.reject('请输入排序')
        } else {
            if (value.length > 7) {
                return Promise.reject('项目简称限制7个字符')
            } else if (!reg.test(value)) {
                return Promise.reject('请输入正整数')
            } else {
                return Promise.resolve()
            }
        }
    }
    // tooltip样式
    const standardStyle = {
        maxWidth: 'unset'
    }
    // tooltip样式
    const remarksTool = {
        maxWidth: '150px'
    }
    // tooltip样式
    const labelToolStyle = {
        maxWidth: '1000px'
    }
    const labelCoulmn = [
        {
            title: '加减分类型',
            width: 120,
            dataIndex: 'pointTypeName'
        },
        {
            title: '加减分数',
            width: 100,
            dataIndex: 'taskPoints'
        },
        {
            title: '加减分触发日期',
            width: 200,
            dataIndex: 'updateTime'
        },
        {
            title: '是否扣分',
            width: 120,
            dataIndex: 'deductStatus'
        },
        {
            title: '审批日期',
            width: 200,
            dataIndex: 'taskRectificationPointsTime'
        },
        {
            title: '是否绩效结算',
            width: 200,
            dataIndex: 'settlementView'
        }
    ]

    function getScore(arr) {
        let sum = 0
        if (arr) {
            arr.forEach(item => {
                if (item.deductStatus === '是') {
                    sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
                }
            })
        }
        return sum
    }

    const currentColumn = ref({})

    function getActionList(column, value = null) {
        currentColumn.value = column
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${column.projectId}`, {
            associatedTask: '否',
            taskStatusList: value ? value : ['未启动', '进行中', '审批中', '延期']
        }).then(data => {
            stateK.actionList = data.data.dataList
            stateK.visibleAction = true
        })
    }

    const actionState = reactive({
        riskList: [],
        current: {},
        visibleRisk: false,
        riskColumns: [
            { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
            { title: '解决方案', dataIndex: 'solution', align: 'center' },
            { title: '风险状态', dataIndex: 'riskState', align: 'center' },
            { title: '提交人', dataIndex: 'createdBy', align: 'center' },
            { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
            { title: '解决人', dataIndex: 'solver', align: 'center' },
            { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' }
        ]
    })

    function handlerActionShowRisks(id) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
            actionState.riskList = data.data
            actionState.current.actionTaskId = id
            actionState.visibleRisk = true
        })
    }

    // 加减分详情弹窗
    // 加减分详情弹窗
    const scoreState = reactive({
        visible: false,
        scoreData: [],
        type: ''
    })

    function showScore(data, type) {
        scoreState.visible = true
        scoreState.scoreData = groupByBusinessDate(data)
        scoreState.type = type
    }

    function groupByBusinessDate(list, key = 'businessDate') {
        const grouped = list.reduce((acc, item) => {
            const groupKey = item[key]
            if (!acc[groupKey]) {
                acc[groupKey] = {
                    month: groupKey,
                    data: []
                }
            }
            acc[groupKey].data.push(item)
            return acc
        }, {})

        return Object.values(grouped)
    }

    function calculateTotalTaskPoints(data) {
        let totalTaskPoints = 0

        data.forEach(monthData => {
            monthData.data.forEach(record => {
                if (record.deductStatus === '是') {
                    // 确保 taskPoints 是数字，并累加到 totalTaskPoints
                    const taskPoints = parseFloat(record.taskPoints)
                    if (!isNaN(taskPoints)) {
                        totalTaskPoints += taskPoints
                    }
                }
            })
        })

        // 返回保留两位小数的结果
        return parseFloat(totalTaskPoints.toFixed(2))
    }

    function formattedWeekGoals(data) {
        return (data || '--').replace(/\n/g, '<br>')
    }

    const weekTargetState = reactive({
        modalTitle: '',
        pmo: false,
        projectDirector: false,
        currentParams: {
            projectId: undefined
        },
        weekData: [],
        weekTargetVisible: false,
        targetList: [],
        mainTarget: ''
    })
    const weekColumns = ref([
        { title: '核心周目标', dataIndex: 'coreWeekContent', align: 'center', width: 150 },
        {
            title: '优先级',
            dataIndex: 'priority',
            align: 'center',
            width: 80
        },
        {
            title: '项目阶段',
            dataIndex: 'milepostName',
            align: 'center',
            width: 120
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            align: 'center',
            width: 100,
            resizable: true
        },
        {
            title: '行动项名称',
            dataIndex: 'actionTaskName',
            align: 'center',
            width: 100,
            resizable: true
        },
        {
            title: '完成标准',
            dataIndex: 'finishStandard',
            align: 'center',
            width: 120,
            resizable: true
        },
        {
            title: '完成情况备注',
            dataIndex: 'finishRemarks',
            align: 'center',
            ellipsis: true,
            width: 150,
            resizable: true
        },
        {
            title: '负责人',
            dataIndex: 'actionTaskOwner',
            align: 'center',
            width: 80
        },
        {
            title: '计划完成时间',
            dataIndex: 'actionTaskEndTime',
            align: 'center',
            width: 100
        },
        {
            title: '实际完成时间',
            dataIndex: 'actionTaskFinishTime',
            align: 'center',
            width: 130
        },
        {
            title: '推进状态',
            dataIndex: 'actionTaskStatus',
            align: 'center',
            width: 120,
            resizable: true
        },
        {
            title: '推进状态更新时间',
            dataIndex: 'modifyDate',
            align: 'center',
            width: 150
        },
        {
            title: '',
            align: 'center',
            width: 50,
            dataIndex: 'expanded'
        }
    ])
    const scrollX = weekColumns.value.reduce((pre, cur) => {
        return parseInt(pre.width) + parseInt(cur.width)
    }, {})

    const weekTableLoading = ref(false)
    const isCJ = ref('项目')

    function showWeekTarget(column, flag) {
        isCJ.value = flag
        weekTableLoading.value = true
        titleMenu.id = isCJ.value ? column.sceneProjectId : column.projectId
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
            projectId: isCJ.value ? column.sceneProjectId : column.projectId
        })
            .then(({ data }) => {
                const now = dayjs()
                weekTargetState.modalTitle = `${data.title}（当前时间：${now.format('YYYY.MM.DD')}）`
                weekTargetState.targetList = data.weekGoalsAndPriorityDtoList?.map(item => ({
                    priority: item.priority,
                    id: item.id,
                    editing: false,
                    weekGoals: item.weekGoals,
                    weekGoalsId: item.weekGoalsId
                }))
                weekTargetState.weekData = data.weekGoalsTaskDtoList || []
                weekTargetState.weekTargetVisible = true
                if (isCJ.value) {
                    weekTargetState.currentParams.projectId = column.sceneProjectId
                } else {
                    weekTargetState.currentParams.projectId = column.projectId
                }
                weekTargetState.pmo = data.pmo
                weekTargetState.projectDirector = data.projectDirector
            })
            .finally(() => {
                weekTableLoading.value = false
            })
    }

    const priorityInput = ref(null)
    const statusInput = ref(null)
    const finishInput = ref(null)
    const coreWeekInput = ref(null)
    const handleEdit = async (record, flag, inputRef) => {
        if (!weekTargetState.pmo) {
            message.info('暂无权限')
        } else {
            record[flag] = true
            await nextTick()
            if (inputRef === 'priorityInput' && priorityInput.value) {
                priorityInput.value.focus()
            }
            if (inputRef === 'statusInput' && statusInput.value) {
                statusInput.value.focus()
            }
            if (inputRef === 'finishInput' && finishInput.value) {
                finishInput.value.focus()
            }
            if (inputRef === 'coreWeekInput' && coreWeekInput.value) {
                coreWeekInput.value.focus()
            }
        }
    }
    const handleEditStatus = async (record, flag, inputRef) => {
        if (!weekTargetState.projectDirector) {
            message.info('暂无权限')
        } else {
            record[flag] = true
            await nextTick()
            if (inputRef === 'statusInput' && statusInput.value) {
                statusInput.value.focus()
            }
        }
    }
    const handleSave = (record, key, flag) => {
        const { priorityEditing, statusEditing, finishEditing, coreWeekEditing, ...dataToSave } = record
        put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task', dataToSave)
            .then(data => {
                if (data.code === 200) {
                    message.success('修改成功')
                } else {
                    message.success(data.message)
                }
            })
            .finally(() => {
                record[flag] = false
                showWeekTarget(weekTargetState.currentParams)
            })
    }
    const expandedIndices = ref([])
    const isExpanded = index => {
        return expandedIndices.value.includes(index)
    }

    const toggleExpand = index => {
        if (isExpanded(index)) {
            expandedIndices.value = expandedIndices.value.filter(i => i !== index)
        } else {
            expandedIndices.value.push(index)
        }
    }

    async function handlerEditTarget(value, index) {
        if (!weekTargetState.pmo) {
            message.info('暂无权限')
        } else {
            weekTargetState.targetList[index].editing = true
            await nextTick(() => {
                const textarea = document.querySelector(`.textarea-${index}`)
                if (textarea) {
                    textarea.focus()
                }
            })
        }
    }

    function saveTarget(index) {
        const { editing, ...dataToSave } = weekTargetState.targetList[index]
        put('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/priority', dataToSave).then(data => {
            if (data.code === 200) {
                weekTargetState.targetList[index].editing = false
                message.success('修改目标成功')
                showWeekTarget(weekTargetState.currentParams)
            } else {
                message.error(data.message)
                showWeekTarget(weekTargetState.currentParams)
            }
        })
    }

    function handleResizeColumn(w, col) {
        col.width = w
    }

    //     无模板项目表格
    const noTemplateState = reactive({
        noTemplateData: [],
        tableLoading: false
    })
    const noTemplateColumns = [
        {
            title: '项目阶段',
            dataIndex: 'projectPhase',
            ellipsis: true,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    style: {
                        padding: '0 5px'
                    },
                    rowSpan: rowSpan
                }
            },
            align: 'center'
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            ellipsis: true,
            align: 'center',
            customCell: item => {
                return {
                    style: {
                        padding: '0 5px'
                    }
                }
            }
        },
        {
            title: '任务状态',
            dataIndex: 'taskStatus',
            ellipsis: true,
            width: '130px',
            align: 'center'
        }
    ]
    const mainLoading = reactive({
        loading: false,
        tip: '加载中...'
    })

    function getNoTemplateMilepostList() {
        if (stateNoTemplate.projectName) {
            get(
                `/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${stateNoTemplate.projectName}/milepost_name/list`
            ).then(data => {
                stateNoTemplate.milepostList = data.data.dataList.map(item => {
                    return {
                        label: item.milepostName,
                        value: item.milepostId
                    }
                })
            })
        }
    }

    function getNoTemplateProject() {
        post('/solution-ppm/api/v2/built-in-system-ppm/tpm/noTemplate/select', {
            templateId: activeKey.value
        }).then(data => {
            stateNoTemplate.projectNameList = data.data
        })
    }

    function projectNameChange(value) {
        stateNoTemplate.milepostName = undefined
    }

    function groupCheckData(data) {
        data.forEach(group => {
            let currentMilepostName = '' // 初始化当前里程碑名称为空字符串
            group.data = group.data.map((item, index) => {
                if (currentMilepostName !== item.projectPhase) {
                    // 如果当前里程碑名称与项目阶段不同
                    currentMilepostName = item.projectPhase // 更新当前里程碑名称
                    let rowSpan = 0
                    for (let i = index; i < group.data.length; i++) {
                        // 计算新组的rowSpan
                        if (currentMilepostName === group.data[i].projectPhase) {
                            rowSpan += 1
                        } else {
                            break // 当遇到不同的项目阶段时，停止计数
                        }
                    }
                    item.rowSpan = rowSpan // 设置当前项目的rowSpan
                } else {
                    item.rowSpan = 0 // 对于组中间的项目，设置rowSpan为0
                }
                return item // 返回修改后的项目
            })
        })
        return data // 返回修改后的数据
    }

    const titleMenu = reactive({
        visible: false,
        id: undefined
    })

    function showContextMenu(event, index, column) {
        titleMenu.visible = true
    }

    function handleShowTask() {
        put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/batch_action_task/${titleMenu.id}`).then(data => {
            if (data.code === 200) {
                message.success('恢复成功')
                post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
                    projectId: titleMenu.id
                }).then(data => {
                    weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
                })
            }
        })
    }

    function handleHideTask() {
        let params = menuData.value
        params.taskStatus = '0'
        put(`/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/action_task`, params).then(data => {
            if (data.code === 200) {
                message.success('隐藏成功')
                post('/solution-ppm/api/v2/built-in-system-ppm/tpm/week_goals/search', {
                    projectId: titleMenu.id
                }).then(data => {
                    weekTargetState.weekData = data.data.weekGoalsTaskDtoList || []
                })
            } else {
                message.error(data.message)
            }
        })
    }

    onMounted(() => {
        document.addEventListener('click', handleGlobalClick)
        document.body.removeEventListener('click', bodyClick)
    })

    onBeforeUnmount(() => {
        document.removeEventListener('click', handleGlobalClick)
    })

    function handleGlobalClick() {
        if (titleMenu.visible) {
            titleMenu.visible = false
        }
    }

    const menuStyle = ref({
        position: 'absolute',
        top: '0',
        left: '0',
        border: '1px solid #eee',
        color: '#3875ff',
        padding: '0 10px',
        cursor: 'pointer'
    })
    const menuData = ref({})
    const menuVisible = ref(false)
    const bodyClick = () => {
        menuVisible.value = false
        document.body.removeEventListener('click', bodyClick)
    }

    // const customClick = (record, index) => {
    //   return {
    //     onContextmenu: (event) => {
    //       event.preventDefault();
    //       menuVisible.value = true
    //       menuData.value = record
    //       console.log(event);
    //       console.log(index+1,'index');
    //       menuStyle.value.top = (event.clientY) + "px";
    //       menuStyle.value.left = (event.clientX-180) + "px";
    //       document.body.addEventListener("click", bodyClick);
    //     },
    //     style: {
    //       cursor: 'pointer',
    //     },
    //   };
    // };

    const customClick = (record, index) => {
        return {
            onContextmenu: event => {
                event.preventDefault()
                menuVisible.value = true
                menuData.value = record

                // 计算菜单的位置
                const modalElement = document.querySelector('.menu-modal')
                console.log(modalElement, 'modalElement')
                const modalRect = modalElement.getBoundingClientRect()
                const topOffset = event.clientY - modalRect.top
                const leftOffset = event.clientX - modalRect.left - 180

                // 设置菜单的样式
                // menuStyle.value = {
                //   top: `${topOffset}px`,
                //   left: `${leftOffset}px`,
                // };
                menuStyle.value.top = `${topOffset}px`
                menuStyle.value.left = `${leftOffset}px`

                // 添加点击 body 隐藏菜单的事件监听
                document.body.addEventListener('click', bodyClick)
            },
            style: {
                cursor: 'pointer'
            }
        }
    }

    const hideTask = reactive({})

    function tipMessage() {
        message.info('该任务已隐藏')
    }

    const statuState = reactive({
        visible: false,
        list: []
    })

    function getTaskStatus(id, type) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                statuState.visible = true
                statuState.list = data.data
            }
        )
    }

    const getIconStatus = status => {
        if (status === 'finish') {
            return 'finish'
        } else if (status === 'process') {
            return 'process'
        } else {
            return 'error'
        }
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*
样式
*/
    .page_root {
        overflow: hidden;
    }

    .kb-page {
        padding: 0 20px 20px 20px;
        height: 100%;
        position: relative;
        background-color: #fff;
        border-radius: 6px;
    }

    .search-div {
        background-color: #fff;
        margin-bottom: 16px;
        height: 72px;
        padding: 0 20px;
        border-radius: 6px;
    }

    .table-tip {
        display: flex;
        height: 63px;
        justify-content: space-between;
    }

    .finish,
    .running,
    .unstart,
    .daily {
        display: flex;
        line-height: 62px;
        margin-right: 13px;
    }

    .unstart {
        margin-right: 24px;
    }

    .left-top {
        display: flex;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: end;
    }

    .finish-box,
    .running-box,
    .unstart-box,
    .daily-box,
    .association-daily-box {
        background: #4cdf95;
        border-radius: 4px;
        width: 20px;
        height: 20px;
        margin: 20px 0;
    }

    .tip-msg {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }

    .running-box {
        background: #7aa1f9;
        border-radius: 4px;
    }

    .unstart-box {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background-color: #fff;
    }

    .daily-box {
        background: #ff5656;
        border-radius: 4px;
    }

    .association-daily-box {
        background: #ffc756;
        border-radius: 4px;
    }

    .one-click,
    .hover-click,
    .db-click,
    .cercle-click,
    .squire-click {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        display: flex;
        line-height: 62px;
        margin-right: 16px;
    }

    .one-click-icon,
    .db-click-icon,
    .hover-click-icon,
    .cercle-click-icon,
    .squire-click-icon {
        width: 16px;
        height: 16px;
        background-size: cover;
        margin: 22px 0;
        margin-right: 4px;
    }

    .one-click-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/432491862019381248.png');
        background-size: cover;
    }

    .db-click-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/432491879230707712.png');
        background-size: cover;
    }

    .hover-click-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/432491837560297472.png');
        background-size: cover;
    }

    .cercle-click-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/440302589158752256.png');
        background-size: cover;
    }

    .squire-click-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/440302604159680512.png');
        background-size: cover;
    }

    .record-div-green,
    .record-div-red,
    .record-div-white,
    .record-div-blue,
    .record-div-orange,
    .record-div-hidden {
        min-width: 10px;
        min-height: 10px;
        width: 100%;
        height: 30px;
        position: relative;
    }

    .icon-hollow,
    .icon-solid,
    .icon-hollow-deep,
    .icon-solid-deep {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        right: -5px;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

    .icon-hollow {
        background-image: url('http://10.40.0.33:9001/file-storage/432479497347504128.png');
        background-size: cover;
    }

    .icon-solid {
        background-image: url('http://10.40.0.33:9001/file-storage/432811531221702656.png');
        background-size: cover;
    }

    .icon-hollow-deep {
        background-image: url('http://10.40.0.33:9001/file-storage/432486532266956800.png');
        background-size: cover;
    }

    .icon-solid-deep {
        background-image: url('http://10.40.0.33:9001/file-storage/432489053010106368.png');
        background-size: cover;
    }

    .tool-tip {
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .record-div-blue {
        background-color: #7aa1f9;
    }

    .record-div-red {
        background-color: #ff5656;
    }

    .record-div-green {
        background-color: #4cdf95;
    }

    .record-div-orange {
        background-color: #ffc756;
    }

    .record-div-hidden {
        min-width: 164px;
        height: 30px;
        background-color: #d9d9d9;
    }

    /*
任务列表样式
*/

    /* 倒计时 */
    .count-down {
        border-radius: 1px;
        background: rgba(255, 123, 0, 0.1);
        color: #ff7b00;
        height: 14px;
        min-width: 15%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 全组 */
    .weight-num {
        font-weight: 600;
    }

    .all-group-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        width: 15%;
        line-height: 14px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 项目经理 */
    .pm-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 15%;
    }

    /* 负责人 */
    .ower-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        width: 50%;
    }

    .all-group-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        width: 50%;
        line-height: 14px;
        margin-bottom: 3px;
        margin-right: 3px;
    }

    /* 项目经理 */
    .pm-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 50%;
    }

    /* 负责人 */
    .ower-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .count-down-hover {
        color: #262626;
    }

    .count-down-hover > p {
        margin: 0;
    }

    .attachment-template {
        display: block;
        overflow-x: auto; /* 允许横向滚动 */
        overflow-y: hidden; /* 隐藏垂直滚动条 */
        scrollbar-width: thin; /* Firefox 64+ */
        scrollbar-color: transparent transparent; /* Firefox 64+ */
    }

    .attachment-template::-webkit-scrollbar {
        height: 0px; /* 谷歌、Safari、Edge等浏览器 */
    }

    .attachment-template::-webkit-scrollbar-thumb {
        background-color: transparent; /* 设置滚动条的颜色为透明 */
    }

    .extension-color {
        border-radius: 1px;
        background: rgba(89, 89, 89, 0.1);
        color: #595959;
        height: 14px;
        min-width: 15%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    .count-down-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 12px 10px;
    }

    .count-down-content-detail {
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        padding: 12px 10px;
    }

    .count-down-content-detail > div {
        box-sizing: border-box;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }

    .count-down-content > div {
        box-sizing: border-box;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }

    /*任务列表样式*/
    :deep(.ant3-tabs-top > .ant3-tabs-nav) {
        margin: 0;
        border-bottom: 1px solid #d9d9d9;
    }

    .task-detail {
        height: 700px;
        overflow-y: auto;
    }

    .fold-rows {
        width: 220px; /* 设置div宽度为220px */
        overflow: hidden; /* 隐藏超出部分 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 显示省略号 */
    }

    .wqd-btn,
    .yq-btn,
    .wc-btn,
    .yqwc-btn,
    .jxz-btn,
    .spz-btn {
        background: #ffffff;
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 66px;
        height: 22px;
        line-height: 22px;
        margin: 0 auto;
    }

    .wc-btn {
        border: 1px solid rgba(48, 191, 120, 1);
        color: #30bf78;
    }

    .yq-btn {
        border: 1px solid rgba(224, 32, 32, 1);
        color: #e02020;
    }

    .wqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c;
    }

    .jxz-btn {
        border: 1px solid rgba(56, 117, 255, 1);
        color: #3875ff;
    }

    .yqwc-btn {
        border: 1px solid rgba(255, 152, 70, 1);
        color: #ff9846;
    }

    .spz-btn {
        border: 1px solid #00b4ec;
        color: #00b4ec;
    }

    .attr {
        overflow-y: auto;
    }

    .two-line {
        border: 1px solid #afc8ff;
        display: flex;
        height: 40px;
        line-height: 40px;
    }

    .two-item {
        display: flex;
        width: 50%;
    }

    .two-left {
        padding: 0 7px;
        text-align: right;
        width: 150px;
        background-color: #ebf1ff;
    }

    .two-right {
        border-left: 1px solid #afc8ff;
        border-right: 1px solid #afc8ff;
        flex: 1;
        padding: 0 7px;
    }

    .text-bold {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .one-line {
        display: flex;
        min-height: 40px;
        line-height: 40px;
        border: 1px solid #afc8ff;
    }

    .one-left {
        background-color: #ebf1ff;
        width: 150px;
        padding: 0 7px;
        text-align: right;
    }

    .one-right {
        padding: 0 7px;
        flex: 1;
        border-left: 1px solid #afc8ff;
    }

    .risk-num {
        color: #3875ff;
        cursor: pointer;
    }

    .one-line,
    .two-line {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }

    a {
        color: #3875ff;
    }

    .task-dependency {
        white-space: pre-wrap;
    }

    .task-name-long {
        display: inline-block;
        width: 300px;
        overflow: hidden; /* 隐藏超出部分 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 显示省略号 */
    }

    .edit-form {
        margin-top: 16px;
        height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .risk-num-white,
    .risk-num-red,
    .risk-num-blue,
    .risk-num-green {
        position: absolute;
        right: 20px;
        top: 9px;
        font-size: 10px;
        color: #fff;
        cursor: pointer;
        font-weight: 600;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid white;
        background-color: transparent;
        line-height: 10px;
    }

    .risk-num-white {
        border: 1px solid #262626;
    }

    .action-num-white,
    .action-num-red,
    .action-num-blue,
    .action-num-green {
        position: absolute;
        right: 38px;
        top: 10px;
        font-size: 10px;
        color: #fff;
        cursor: pointer;
        width: 12px;
        height: 12px;
        border-radius: 4px; /* 设置圆角大小 */
        border: 1px solid white;
        background-color: transparent;
        line-height: 9px;
        font-weight: 600;
    }

    .action-num-white {
        color: #262626;
        border: 1px solid #262626;
    }

    .task-ower-white,
    .task-ower-red,
    .task-ower-blue,
    .task-ower-green {
        position: absolute;
        left: 3px;
        top: 3px;
        font-size: 12px;
        color: #fff;
    }

    .risk-num-white,
    .risk-num-white {
        color: #666666;
    }

    .task-ower-white {
        color: #262626;
    }

    //    里程碑终验初验
    .task-name {
        position: relative;
        height: 40px;
        line-height: 40px;
        width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .task-milestone {
        position: absolute;
        top: 13px;
        left: 9px;
        width: 45px;
        height: 14px;
        font-size: 12px;
        line-height: 14px; /* 与高度相同 */
        color: #3875ff;
        background: #ebf1ff;
        text-align: center;
    }

    .task-first {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }

    .task-over {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }

    .is-first {
        margin-left: 55px;
    }

    .is-first-no {
        margin-left: 16px;
    }

    .task-name-title {
        display: inlie-block;
        min-width: 50px;
    }

    .finish-standard {
        display: inlie-block;
        min-width: 70px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .no-first {
        margin-left: 20px;
    }

    /*关键路径*/
    .critical-path {
        position: absolute;
        top: 13px;
        left: 5px;
        font-size: 12px;
        width: 60px;
        height: 14px;
        line-height: 14px; /* 与高度相同 */
        color: #ff9846;
        background: #fff5ed;
        text-align: center;
    }

    .task-milestone-right {
        left: 70px;
    }

    .is-first-path {
        margin-left: 115px;
    }

    .task-first-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
        background-size: cover;
    }

    .task-over-right {
        position: absolute;
        top: 13px;
        left: 70px;
        width: 32px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
        background-size: cover;
    }

    .is-first-path-no-mark {
        margin-left: 70px;
    }

    .kb-title {
        position: relative;
        cursor: pointer;
        text-align: center;
    }

    .kb-title-icon {
        position: absolute;
        right: 5px;
        top: 4px;
        font-size: 12px;
        color: #888b92;
        cursor: pointer;
        width: 14px;
        height: 14px;
        border-radius: 4px; /* 设置圆角大小 */
        border: 1px solid #888b92;
        background-color: transparent;
        line-height: 12px;
        font-weight: 600;
        text-align: center;
    }

    .cj-title-icon {
        position: absolute;
        left: 5px;
        top: 3px;
        font-size: 12px;
        cursor: pointer;
        width: 14px;
        height: 14px;
    }

    .count-down-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 5px;
    }

    .count-down-content > div {
        box-sizing: border-box;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }

    /* 倒计时 */
    .count-down {
        border-radius: 1px;
        background: rgba(255, 123, 0, 0.1);
        color: #ff7b00;
        height: 14px;
        min-width: 52%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 全组 */
    .weight-num {
        font-weight: 600;
    }

    .all-group-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        width: 52%;
        line-height: 14px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 项目经理 */
    .pm-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
        margin-bottom: 3px;
    }

    /* 负责人 */
    .ower-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .all-group-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        width: 44%;
        line-height: 14px;
        margin-bottom: 3px;
        margin-right: 3px;
    }

    /* 项目经理 */
    .pm-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
    }

    /* 负责人 */
    .ower-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .count-down-hover {
        color: #262626;
    }

    .count-down-hover > p {
        margin: 0;
    }

    .score-title-first {
        background: rgba(250, 173, 20, 0.1);
        color: #262626;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
    }

    .score-title {
        font-size: 16px;
        color: #262626;
        font-weight: 600;
        margin: 18px 0;
    }

    .score-num {
        font-size: 18px;
        color: #3875ff;
        font-weight: 600;
    }

    .score-num-red {
        color: #f5222d;
        font-weight: 600;
    }

    .score-month {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        margin-bottom: 12px;
    }

    .month-score {
        font-size: 16px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        display: inline-block;
        margin-left: 24px;
    }

    .default-score {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }

    .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #fff;
        padding: 8px 16px;
        border: none;
    }

    .score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 16px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #ebf1ff;
        color: #262626;
        font-weight: 600;
        padding: 8px 4px;
        border-right: 1px solid #d9d9d9 !important;
    }

    .target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #ebf1ff;
        color: #262626;
        font-weight: 600;
        padding: 8px 4px;
    }

    .target-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #ebf1ff;
        color: #262626;
        font-weight: 600;
        padding: 8px 4px;
    }

    .target-table-box:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }

    .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    :deep(
            .kb-table-box
                .ant3-table.ant3-table-bordered
                > .ant3-table-container
                > .ant3-table-body
                > table
                > tbody
                > tr
                > td
        ) {
        border: 1px solid #d9d9d9;
        color: #262626;
        border-left: none;
    }

    :deep(.kb-table-box .ant3-table-tbody tr) {
        line-height: 22px;
        height: 30px;
        padding: 2px 0;
    }

    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 2px 0;
        word-break: break-all;
    }

    :deep(.table-striped td) {
        background-color: #fafafa;
    }

    .risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #fff;
        padding: 8px 16px;
        border: none;
    }

    .risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 16px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .count-down-content {
        cursor: pointer;
    }

    .target-message {
        display: flex;
        margin-bottom: 7px;
        line-height: 32px;
    }

    .target-title {
        width: 150px;
        font-size: 14px;
        color: #595959;
        font-weight: 400;
        text-align: right;
    }

    .target-content {
        position: relative;
        flex: 1;
    }

    .target-span {
        width: 100%;
        display: inline-block;
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: top;
        font-size: 14px;
        color: #262626;
        font-weight: 400;
    }

    .target-span[style*='height: auto;'] {
        white-space: normal;
    }

    .priority-edit {
        display: inline-block;
        width: 100%;
        cursor: pointer;
    }

    .target-table-box
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
    }

    .custom-title {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    .target-table-box {
        margin-top: 16px;
        position: relative;
    }

    .no-template-main {
        width: 100%;
        overflow-x: auto;
        height: 600px;
        display: flex;
        padding-bottom: 8px;
        padding-left: 1px;
    }

    .table-item {
        margin-top: 1px;
        width: 530px;
        margin-right: 16px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 16px;
        background-color: #fff;
        flex-shrink: 0;
    }

    .table-item:last-child {
        margin-right: 0;
    }

    .table-title {
        margin-bottom: 13px;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        height: 16px;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        padding-left: 8px;
        cursor: pointer;
        position: relative;
    }

    .action-title-icon {
        position: absolute;
        right: 0;
        top: 4px;
        font-size: 12px;
        color: #888b92;
        cursor: pointer;
        width: 14px;
        height: 14px;
        border-radius: 4px; /* 设置圆角大小 */
        border: 1px solid #888b92;
        background-color: transparent;
        line-height: 12px;
        font-weight: 600;
        text-align: center;
    }

    .table-item
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }

    .table-item :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 2px 0;
        word-break: break-all;
    }

    :deep(.table-item .ant3-table-tbody tr) {
        line-height: 22px;
        height: 30px;
        padding: 2px 0;
    }

    :deep(
            .table-item
                .ant3-table.ant3-table-bordered
                > .ant3-table-container
                > .ant3-table-body
                > table
                > tbody
                > tr
                > td
        ) {
        border: 1px solid #d9d9d9;
        color: #262626;
        border-left: none;
    }

    .table-item:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #ebf1ff;
        color: #262626;
        font-weight: 600;
        padding: 8px 4px;
        border-bottom: 1px solid #d9d9d9;
    }

    .action-select {
        display: flex;
        justify-content: start;
    }

    .no-template-content {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .no-img {
        background-image: url('http://10.40.0.33:9001/file-storage/431370789385246720.png');
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        width: 200px;
        height: 100px;
    }

    .tip-msg-img {
        position: relative;
        top: 90px;
        left: 65px;
    }

    .context-menu {
        position: absolute;
        right: 50px;
        top: 10px;
    }

    /*样式*/

    .title-new-status {
        height: 62px;
        line-height: 36px;
        padding: 0 16px;
        margin-bottom: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/457843108093009920.png');
        background-size: cover;
        border: 1px solid #3875ff;
        border-radius: 5px;
    }

    :deep(.ant3-steps-item-container) {
        padding: 0 16px;
    }

    :deep(.ant3-steps-item-tail::after) {
        margin-left: 12px;
        background-color: #3875ff;
    }

    :deep(.ant3-steps-item-description) {
        font-size: 12px;
        color: #595959;
        text-align: left;
        line-height: 20px;
        font-weight: 400;
    }

    :deep(.ant3-steps-item-icon) {
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #3875ff;
        margin-top: 6px;
    }

    :deep(.ant3-steps-item-title) {
        height: 28px;
        font-size: 14px;
        color: #262626;
        text-align: left;
        line-height: 22px;
        font-weight: 400;
    }

    :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
        background-color: #3875ff;
    }

    :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
        background: #3875ff;
    }

    :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
        border-color: #3875ff;
    }

    :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
        color: #3875ff !important;
    }

    .task-status-new {
        cursor: pointer;
    }

    .left-title,
    .right-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        letter-spacing: 0;
        text-align: left;
        font-weight: 400;
        height: 31px;
        line-height: 31px;
    }

    .weight-status {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }

    .batch-line {
        width: 100%;
        border-top: 1px solid #d9d9d9;
        margin: 16px 0;
    }

    .weight-status-new {
        font-weight: 600;
        color: #262626;
    }
</style>
